在canvas中有clip函数，也就是裁剪，从原始画布中剪切任意形状和尺寸。
如下例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas</canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.fillStyle = "black";context.fillRect(0, 0, canvas.width, canvas.height);context.beginPath();context.strokeStyle = "green";context.arc(400, 400, 150, 0, Math.PI * 2);context.stroke();context.font = "bold 150px Arial";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "#058";context.fillText("CANVAS", canvas.width / 2, canvas.height / 2);}</script></body></html>
程序运行截图如下：
添加clip代码后运行截图如下：
源码如下:
<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.fillStyle = "black";context.fillRect(0, 0, canvas.width, canvas.height);context.beginPath();//context.strokeStyle = "green";context.arc(400, 400, 150, 0, Math.PI * 2);//context.stroke();context.clip();context.font = "bold 150px Arial";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "#058";context.fillText("CANVAS", canvas.width / 2, canvas.height / 2);}</script>
下面记录下探照灯的例子：
程序运行截图如下，那个探照灯的圆是会动的。
源码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas</canvas><script>let searchLight = {x: 400,y: 400,radius: 150,vx: Math.random() * 5 + 10,vy: Math.random() * 5 + 10}window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");setInterval(function(){draw(context);update(canvas.width, canvas.height);}, 40)}function draw(cxt){let canvas = cxt.canvas;cxt.clearRect(0, 0, canvas.width, canvas.height);cxt.save();cxt.beginPath();cxt.fillStyle = "black";cxt.fillRect(0, 0, canvas.width, canvas.height);cxt.beginPath();cxt.arc(searchLight.x, searchLight.y, searchLight.radius, 0, Math.PI * 2);cxt.fillStyle = "#fff";cxt.fill();cxt.clip();cxt.font = "bold 150px Arial";cxt.textAlign = "center";cxt.textBaseline = "middle";cxt.fillStyle = "#058";cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 4);cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 2);cxt.fillText("CANVAS", canvas.width / 2, canvas.height * 3 / 4);cxt.restore();}function update(canvasWidth, canvasHeight){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 >= canvasHeight){searchLight.vy = -searchLight.vy;searchLight.y = canvasHeight - searchLight.radius;}}</script></body></html>
这里说明下实现的逻辑，碰撞检测，清空画布方面的不提了。
就提下这个draw。
这里是先绘制出了一个全黑的矩形，这个矩形和画布一样大。然后再绘制一个圆，这个圆是白色的，然后裁剪，这样的画，显示的时候就只会显示圆。然后就搞3个canvas字绘制到画布上。再加上运动效果，就变成探照灯实例了。
