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

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style media=' screen ' body { background : black；文本对齐：居中} # v1 {背景：白色}/样式脚本窗口。onload=function(){ let Ov=document。getelementbyid(' v1 ')；让GD=Ov。GetContext(' 2d ')；//图形上下文——绘图接口让Ocolor=document。getelementbyid(' color 1 ')；让颜色；奥科勒。onchange=function(){ color=this。价值；}让lastXX，last青奥。onmousedown=function(ev){ LasTx=ev。offsetxlastY=ev。偏移；完毕。onmousemove=function(ev){ GD。begin path()；//清除之前所有的路径gd.moveTo(lastX，LasTy)；gd.lineTo(ev.offsetX，ev。偏移)；lastX=ev.offsetXlastY=ev。偏移；gd.strokeStyle=color//用获取到的颜色作为绘制颜色GD。笔画()；} Ov。onmouseup=function(){ Ov。onmousemove=nullov . onmouseup=null } } }/script/head dyinput type=' color ' id=' color 1 '/br/！帆布的宽和高是写在标签里的，写在风格里面不起作用-画布id='v1 '宽度='800 '高度=' 600 '/画布/正文/html代码的运行结果如图：

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style media=' screen ' body { background : black；文本对齐：居中} # v1 {背景：白色}/样式脚本窗口。onload=function(){ let Ov=document。getelementbyid(' v1 ')；让obt n1=document。getelementbyid(' BTN 1 ')；让N2=文件。getelementbyid(' BTN 2 ')；让obtn 3=文档。getelementbyid(' BTN 3 ')；让obtn 4=文档。getelementbyid(' BTN 4 ')；让GD=Ov。GetContext(' 2d ')；让img=new Image()；img。src=' 1。jpg '；img。onload=function(){ GD。绘制图像(img，0，0)；oBtn1.onclick=function () { //获取像素区让imageData=gd.getImageData(0，0，oV.width，oV。高度)；//数据[(r*W c)*4]为（让r=0；水下机器人。高度；r ){ for(让c=0；coV.widthc){ let avg=(imagedata。数据[(r * ov。宽度c)* 4]imagedata。数据[(r * ov。宽度c)* 4 1]imagedata。数据[(r * ov。宽度c)* 4 ^ 2]]/3；imagedata。数据[(r * ov。宽度c)* 4]=imagedata。数据[(r * ov。宽度c)* 4 ^ 1]=imagedata。数据[(r * ov。宽度c)* 4 ^ 2]=平均值；} } gd.putImageData(imageData，0，0)；} oBtn2.onclick=function () { //获取像素区让imageData=gd.getImageData(0，0，oV.width，oV。高度)；//数据[(r*W c)*4]为（让r=0；水下机器人。高度；r ){ for(让c=0；coV.widthc){ imagedata。数据[(r * Ov。宽度c)* 4 ^ 2]=0；{ 0 } } GD。putimagedata(imageData，0，0)；} oBtn3.onclick=function () { //获取像素区让imageData=gd.getImageData(0，0，oV.width，oV。高度)；//数据[(r*W c)*4]为（让r=0；水下机器人。高度；r ){ for(让c=0；coV.widthc){ imagedata。数据[(r * Ov。宽度c)* 4]=0；imagedata。数据[(r * Ov。宽度c)* 4 ^ 2]=0；} } gd.putImageData(imageData，0，0)；} oBtn4.onclick=function () { //火狐支持，在火狐中点击导出图片会在新窗口打开图片让src=Ov。TotaToul()；window.open(src，' _ blank ')；} } }/script/head dyinput type=' button ' value='变灰id=' BTN 1 '/输入类型='按钮'值='变黄id=' BTN 2 '/输入类型='按钮'值='变绿id=' BTN 3 '/输入类型='按钮'值='导出图片id=' BTN 4 '/画布id='v1 '宽度='800 '高度=' 600 '/画布/正文/html代码运行效果截图：该图为变黄效果。

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