html js 异步画图,js canvas实现画图、滤镜效果

本文实例为大家分享了canvas实现画图、滤镜效果的具体代码，供大家参考，具体内容如下

1、用canvas来实现画图的代码如下：

Title

body {background:black; text-align:center}

#v1 {background:white}

window.οnlοad=function () {

let oV=document.getElementById('v1');

let gd=oV.getContext('2d'); //图形上下文——绘图接口

let oColor=document.getElementById('color1');

let color;

oColor.οnchange=function () {

color=this.value;

}

let lastX,lastY;

oV.οnmοusedοwn=function (ev) {

lastX=ev.offsetX;

lastY=ev.offsetY;

oV.οnmοusemοve=function (ev) {

gd.beginPath();//清除之前所有的路径

gd.moveTo(lastX,lastY);

gd.lineTo(ev.offsetX,ev.offsetY);

lastX=ev.offsetX;

lastY=ev.offsetY;

gd.strokeStyle=color;//用获取到的颜色作为绘制颜色

gd.stroke();

}

oV.οnmοuseup=function () {

oV.οnmοusemοve=null;

oV.οnmοuseup=null;

}

}

}

代码的运行结果如图：

2、用canvas来实现滤镜效果，其实就是像素级操作。代码如下：代码中的1.jpg为网上找的风景图，可自行寻找。

Title

body {background:black; text-align:center}

#v1 {background:white}

window.οnlοad=function () {

let oV=document.getElementById('v1');

let oBtn1=document.getElementById('btn1');

let oBtn2=document.getElementById('btn2');

let oBtn3=document.getElementById('btn3');

let oBtn4=document.getElementById('btn4');

let gd=oV.getContext('2d');

let img=new Image();

img.src='1.jpg';

img.οnlοad=function () {

gd.drawImage(img,0,0);

oBtn1.οnclick=function () {

//获取像素区

let imageData=gd.getImageData(0,0,oV.width,oV.height);

//data[(r*W+c)*4]

for(let r=0;r

for(let c=0;c

let avg=(imageData.data[(r*oV.width+c)*4]+imageData.data[(r*oV.width+c)*4+1]+imageData.data[(r*oV.width+c)*4+2])/3;

imageData.data[(r*oV.width+c)*4]=imageData.data[(r*oV.width+c)*4+1]=imageData.data[(r*oV.width+c)*4+2]=avg;

}

}

gd.putImageData(imageData,0,0);

}

oBtn2.οnclick=function () {

//获取像素区

let imageData=gd.getImageData(0,0,oV.width,oV.height);

//data[(r*W+c)*4]

for(let r=0;r

for(let c=0;c

imageData.data[(r*oV.width+c)*4+2]=0;

0 }

}

gd.putImageData(imageData,0,0);

}

oBtn3.οnclick=function () {

//获取像素区

let imageData=gd.getImageData(0,0,oV.width,oV.height);

//data[(r*W+c)*4]

for(let r=0;r

for(let c=0;c

imageData.data[(r*oV.width+c)*4]=0;

imageData.data[(r*oV.width+c)*4+2]=0;

}

}

gd.putImageData(imageData,0,0);

}

oBtn4.οnclick=function () {

//火狐支持，在火狐中点击导出图片会在新窗口打开图片

let src=oV.toDataURL();

window.open(src,"_blank");

}

}

}

代码运行效果截图：该图为变黄效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。