canvas系类-加载/裁剪图片(二)

短命女 2021-09-11 08:10 282阅读 0赞

图片裁剪：clip() 方法从原始画布中剪切任意形状和尺寸。

裁切路径和普通的 canvas图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

根据以上，来个列子

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>裁切路径</title> </head> <body> <div> <canvas id="canvas"></canvas> </div> <script type="text/javascript"> //1.获取canvas上下文， var dom=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var ctx=dom.getContext('2d');//获取canvas上下文的内容 ctx.beginPath(); ctx.fillRect(0,0,canvas.width,canvas.height); //裁剪 ctx.beginPath(); ctx.arc(400,400,150,0,Math.PI*2); ctx.fillStyle="#fff"; ctx.fill(); ctx.clip(); ctx.font="bold 150px Arial"; ctx.textAlign="center"; ctx.textBaseline="middle"; ctx.fillStyle="#058"; ctx.fillText("CANVAS！",canvas.width/2,canvas.height/2); </script> </body> </html>

![20170227160324396][]

根据这个可以做出探照灯的效果

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <div> <canvas id="canvas"></canvas> </div> <script type="text/javascript"> //设置裁剪的参数 var searchLight={x:400,y:400,radius:150,vx:Math.random()*5+10,vy:Math.random()*5+10} //1.获取canvas上下文， var dom=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var ctx=dom.getContext('2d');//获取canvas上下文的内容 setInterval( function(){ draw(ctx); update(canvas.width,canvas.height); }, 50 ); function draw(ctx){ // var canvas = ctx.canvas; ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); //画布的颜色 ctx.beginPath(); ctx.fillRect(0,0,canvas.width,canvas.height); //裁剪 ctx.beginPath(); ctx.arc(searchLight.x,searchLight.y,searchLight.radius,0,Math.PI*2); ctx.fillStyle="#fff"; ctx.fill(); ctx.clip(); ctx.font="bold 150px Arial"; ctx.textAlign="center"; ctx.textBaseline="middle"; ctx.fillStyle="#058"; ctx.fillText("CANVAS！",canvas.width/2,canvas.height/1.5); ctx.fillText("CANVAS！",canvas.width/2,canvas.height/2); ctx.fillText("CANVAS！",canvas.width/2,canvas.height/4); ctx.restore(); } function update(canvasWidth, canvasHight){ searchLight.x += searchLight.vx; searchLight.y += searchLight.vy; if( searchLight.x - searchLight.radius<=0 ){ searchLight.vx = -searchLight.vx; searchLight.x = searchLight.radius; } if( searchLight.x + searchLight.radius>=canvasWidth ){ searchLight.vx = -searchLight.vx; searchLight.x = canvasWidth-searchLight.radius; } if( searchLight.y - searchLight.radius<=0 ){ searchLight.vy = -searchLight.vy; searchLight.y = searchLight.radius; } if( searchLight.y + searchLight.radius>=canvasHight ){ searchLight.vy = -searchLight.vy; searchLight.y = canvasHight-searchLight.radius; } } </script> </body> </html>

[20170227160324396]: /images/20210813/3a04fe37de5c4813825c8d537091dbba.png