canvas画图片
ctx.drawImage(图片对象,x,y);
三个参数:图片对象,开始绘制图片的坐标(即从图片的何位置开始绘制)ctx.drawImage(图片对象,x,y,width,height);
五个参数:后两个参数是所绘画的图片在画布中的宽和高ctx.drawImage(图片对象,x,y,width,height,x1,y1,width1,height1);
九个参数:后四个参数分别为所绘图片在画布中开始绘画的位置坐标和在画布中的宽和高。因为图片、视频等属于资源数据,加载需要一定的时间,所以需要预加载。
12345var img=new Image();img.src="path./src.png";img.onload=function(){ctx.drawImage(img,0,0,100,100,10,10,100,100);}
getImageData(0,0,500,500);
获取图片像素点
- 四个参数分别为:开始获取像素点的坐标,获取范围的宽和高1234567var img=new Image();img.src="path./src.png";img.onload=function(){ctx.drawImage(img,0,0,100,100,0,0,500,500);var imageData=ctx.getImageData(0,0,500,500);console.log(imageData);}
imageData
- 可以打印看看里面的数据形式
- 所得到的imageData是一个对象,分别为:data数组、所获取像素点的宽度、所获取像素点的高度
- 所获取到的imageData是所有的
rgba(r,g,b,a)
的四个参数,4个为一组 - 所以遍历
imageData.data
数组,可以得到所有的像素点。 - 利用对像素点的处理,可以改变整个图片的色调,进而对图片进行简单的色调处理。12345678910111213141516171819var img=new Image();img.src="path./src.png";img.onload=function(){ctx.drawImage(img,0,0,100,100,0,0,500,500);var imageData=ctx.getImageData(0,0,500,500);console.log(imageData);for(var i=0;i<imageData.data.length;i+=4){var r=imageData.data[i];var g=imageData.data[i+1];var b=imageData.data[i+2];var a=imageData.data[i+3];//透明度}var gray=(r+g+b)/3;imageData.data[i]=gray;imageData.data[i+1]=gray;imageData.data[i+2]=gray;}//再把变之后的颜色重新赋值给imageData对象ctx.putImageData(imageData,100,100);//后两个参数为要给颜色的位置,(画布中的坐标),还可以利用这个属性对图像进行反色处理,如下图所示.
bezier曲线
- 二次贝塞尔曲线
ctx.quadraticCurveTo(500,0,500,500);
画贝塞尔曲线包括画一个起始点,即ctx.moveTo(0,0);
函数里面的两个坐标分别为控制点的坐标和结束点的坐标。 - 三次贝塞尔曲线
ctx.bezierCurveTo(500,0,0,500,500,500);
跟二次贝塞尔曲线一样,只不过多了一对控制点,可以画更丰富的曲线。它也同样需要一个开始点。1234ctx.beginPath();ctx.moveTo(0,0);ctx.quadraticCurveTo(500,0,500,500);ctx.stroke();
1234ctx.beginPath();ctx.moveTo(0,0);ctx.bezierCurveTo(500,0,0,500,500,500);ctx.stroke();
小栗子🎩🎩🎩
动态贝塞尔曲线动画
- 实现这个效果有两种方法可以判断鼠标的点在红球上还是蓝球上,一是计算鼠标落下的点距离小球圆心的距离,第二种方法就是下面所演示的利用
ctx.isPointInPath(x,y);
来判断某一点是否在当前画布中,此方法只能判断当前画布的点,所以把红球和蓝色球分开画,分开判断就行了。12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394function draw(x1,y1,x2,y2){//画灰色虚线ctx.beginPath();ctx.moveTo(0,500);ctx.lineTo(500,0);ctx.lineWidth=15;ctx.strokeStyle="lightgray";ctx.stroke();//画黑色实线ctx.beginPath();ctx.moveTo(500,0);ctx.bezierCurveTo(x1,y1,x2,y2,0,500);ctx.lineWidth=15;ctx.strokeStyle="black";ctx.stroke();//画两条细黑线ctx.beginPath();ctx.moveTo(0,500);ctx.lineTo(x1,y1);ctx.lineWidth=5;ctx.stroke();ctx.beginPath();ctx.moveTo(500,0);ctx.lineTo(x2,y2);ctx.lineWidth=5;ctx.stroke();}//画红球的方法function redBall(x1,y1){ctx.beginPath();ctx.fillStyle="pink";ctx.arc(x1,y1,10,0,Math.PI*2);ctx.fill();}//画蓝球的方法function blueBall(x2,y2){ctx.beginPath();ctx.fillStyle="blue";ctx.arc(x2,y2,10,0,Math.PI*2);ctx.fill();}//初始化var x1=100;var y1=100;var x2=400;var y2=400;draw(x1,y1,x2,y2);redBall(x1,y1);blueBall(x2,y2);mycanvas.onmousedown=function(e){var ev=e || window.event;var xx=ev.clientX-mycanvas.offsetLeft;var yy=ev.clientY-mycanvas.offsetTop;redBall(x1,y1);//判断鼠标落下的点在不在红球内if(ctx.isPointInPath(xx,yy)){console.log("在红球中");mycanvas.onmousemove=function(e){var ev=e || window.event;var xx1=ev.clientX-mycanvas.offsetLeft;var yy1=ev.clientY-mycanvas.offsetTop;ctx.clearRect(0,0,mycanvas.width,mycanvas.height);x1=xx1;y1=yy1;draw(x1,y1,x2,y2);redBall(x1,y1);blueBall(x2,y2);}}blueBall(x2,y2);//判断鼠标落下的点在不在红球内if(ctx.isPointInPath(xx,yy)){console.log("在蓝球中");mycanvas.onmousemove=function(e){var ev=e || window.event;var xx1=ev.clientX-mycanvas.offsetLeft;var yy1=ev.clientY-mycanvas.offsetTop;ctx.clearRect(0,0,mycanvas.width,mycanvas.height);x2=xx1;y2=yy1;draw(x1,y1,x2,y2);redBall(x1,y1);blueBall(x2,y2);}}}document.onmouseup=function(){mycanvas.onmousemove=null;}
刮刮卡效果
- 在canvas画布中,画布的默认颜色是透明的,并且利用组合图形的相关函数我们可以做出刮刮卡的效果
ctx.globalCompositeOperation
设置组合图形的目标图和源图的组合方式- 在canvas中把先画的图叫做目标图,后画的图叫做源图。12345678910111213141516171819202122232425//目标图ctx.beginPath();ctx.fillStyle="gray";ctx.fillRect(0,0,mycanvas.width,mycanvas.height);ctx.globalCompositeOperation="destination-out";//画源图mycanvas.onmousedown=function(e){var ev=window.event || e;var x1=ev.clientX-mycanvas.offsetLeft;var y1=ev.clientY-mycanvas.offsetTop;ctx.beginPath();ctx.moveTo(x1,y1);mycanvas.onmousemove=function(e){var ev=window.event || e;var x2=ev.clientX-mycanvas.offsetLeft;var y2=ev.clientY-mycanvas.offsetTop;ctx.lineTo(x2,y2);ctx.lineWidth=23;ctx.lineCap="round";ctx.stroke();}}document.onmouseup=function(){mycanvas.onmousemove=null;}
进阶版刮刮卡
- 可以通过对像素点的利用让刮刮卡刮到一半的时候自动刮开。
- 即判断所有的像素点透明度为0的点,
a
的值=0.123456789101112131415161718192021222324252627282930313233343536373839404142//目标图ctx.beginPath();ctx.fillStyle="gray";ctx.fillRect(0,0,mycanvas.width,mycanvas.height);ctx.globalCompositeOperation="destination-out";//画源图mycanvas.onmousedown=function(e){var ev=window.event || e;var x1=ev.clientX-mycanvas.offsetLeft;var y1=ev.clientY-mycanvas.offsetTop;ctx.beginPath();ctx.moveTo(x1,y1);mycanvas.onmousemove=function(e){var ev=window.event || e;var x2=ev.clientX-mycanvas.offsetLeft;var y2=ev.clientY-mycanvas.offsetTop;ctx.lineTo(x2,y2);ctx.lineWidth=23;ctx.lineCap="round";ctx.stroke();all();}}document.onmouseup=function(){mycanvas.onmousemove=null;}//判断像素点的函数function all(){var imgData=ctx.getImageData(0,0,mycanvas.width,mycanvas.height);var per=imgData.data.length/8;var count=0;for(var i=0;i<imgData.data.length;i+=4){var a=imgData.data[i+3];if(a==0){count++;if(count>=per){ctx.clearRect(0,0,mycanvas.width,mycanvas.height);}}}}