canvas笔记-clip裁剪函数的使用及探照灯实例- 前端开发

在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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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>