js canvas实现画图、滤镜效果
程序员文章站
2022-03-13 18:52:40
本文实例为大家分享了canvas实现画图、滤镜效果的具体代码，供大家参考，具体内容如下
1、用canvas来实现画图的代码如下：
本文实例为大家分享了canvas实现画图、滤镜效果的具体代码，供大家参考，具体内容如下
1、用canvas来实现画图的代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style media="screen">
body {background:black; text-align:center}
#v1 {background:white}
</style>
<script>
window.onload=function () {
let ov=document.getelementbyid('v1');
let gd=ov.getcontext('2d'); //图形上下文——绘图接口
let ocolor=document.getelementbyid('color1');
let color;
ocolor.onchange=function () {
color=this.value;
}
let lastx,lasty;
ov.onmousedown=function (ev) {
lastx=ev.offsetx;
lasty=ev.offsety;
ov.onmousemove=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.onmouseup=function () {
ov.onmousemove=null;
ov.onmouseup=null;
}
}
}
</script>
</head>
<body>
<input type="color" id="color1" /><br/>
<!--canvas的宽和高是写在标签里的，写在style里面不起作用-->
<canvas id="v1" width="800" height="600">
</canvas>
</body>
</html>
代码的运行结果如图：
2、用canvas来实现滤镜效果，其实就是像素级操作。代码如下：代码中的1.jpg为网上找的风景图，可自行寻找。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style media="screen">
body {background:black; text-align:center}
#v1 {background:white}
</style>
<script>
window.onload=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.onload=function () {
gd.drawimage(img,0,0);
obtn1.onclick=function () {
//获取像素区
let imagedata=gd.getimagedata(0,0,ov.width,ov.height);
//data[(r*w+c)*4]
for(let r=0;r<ov.height;r++){
for(let c=0;c<ov.width;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.onclick=function () {
//获取像素区
let imagedata=gd.getimagedata(0,0,ov.width,ov.height);
//data[(r*w+c)*4]
for(let r=0;r<ov.height;r++){
for(let c=0;c<ov.width;c++){
imagedata.data[(r*ov.width+c)*4+2]=0;
0 }
}
gd.putimagedata(imagedata,0,0);
}
obtn3.onclick=function () {
//获取像素区
let imagedata=gd.getimagedata(0,0,ov.width,ov.height);
//data[(r*w+c)*4]
for(let r=0;r<ov.height;r++){
for(let c=0;c<ov.width;c++){
imagedata.data[(r*ov.width+c)*4]=0;
imagedata.data[(r*ov.width+c)*4+2]=0;
}
}
gd.putimagedata(imagedata,0,0);
}
obtn4.onclick=function () {
//火狐支持，在火狐中点击导出图片会在新窗口打开图片
let src=ov.todataurl();
window.open(src,"_blank");
}
}
}
</script>
</head>
<body>
<input type="button" value="变灰" id="btn1"/>
<input type="button" value="变黄" id="btn2"/>
<input type="button" value="变绿" id="btn3"/>
<input type="button" value="导出图片" id="btn4"/>
<canvas id="v1" width="800" height="600">
</canvas>
</body>
</html>
代码运行效果截图：该图为变黄效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 详解Express笔记之动态渲染HTML(新手入坑)
下一篇： PM2自动部署代码步骤流程总结