<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>滤镜效果</title>
</head>
<body>
<canvas id="kycanvas" style="display: block;margin: auto;border: 1px solid #666666">
当前浏览器不支持canvas,请更换浏览器后再试!
</canvas>
<button id="btn" style="width: 100px;height: 40px;" οnclick="failter()" >获取图片</button>
<canvas id="kycanvas1" style="display: block;margin: auto;border: 1px solid #666666;">
当前浏览器不支持canvas,请更换浏览器后再试!
</canvas>
</body>
<script>
var image = new Image();
var canvas = document.getElementById("kycanvas");
var context = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
var canvas1 = document.getElementById("kycanvas1");
var context1 = canvas1.getContext("2d");
canvas1.width = 200;
canvas1.height = 200;
image.src = "images/im1.jpg";
image.onload = function (){
context.drawImage(image,0,0,canvas.width,canvas.height);
}
function failter(){
var imageData = context.getImageData(0,0,canvas.width,canvas.height);
var pixelData = imageData.data;//获取imageData 对象中的每个像素
for( var i = 0; i < canvas.width * canvas.height;i++){//循环所有像素
pixelData[4*i+0] = 255; //r
//pixelData[4*i+1] = 0; //g
//pixelData[4*i+2] = 0; //b
pixelData[4*i+3] = 100; //a
}
context1.putImageData(imageData,0,0,20,20,canvas.width-40,canvas.height-40);
}
</script>
</html>
canvas 滤镜效果 通过更改像素
最新推荐文章于 2024-02-09 08:49:51 发布