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

展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值