在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字繪製到畫布上。再加上運動效果，就變成探照燈實例了。