在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字绘制到画布上。再加上运动效果,就变成探照灯实例了。