canvas笔记-阴影的使用

关于阴影有如下的几个属性

context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur

其中blur的英文解释为模糊不清的,在canvas中填写一个数值即可

 

如下例子

程序运行截图如下:

源码如下:

<!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.shadowColor = "gray";
        context.shadowOffsetX = 20;
        context.shadowOffsetY = 20;
        context.shadowBlur = 5;

        context.fillRect(200, 200, 400, 400);
    }

</script>

</body>
</html>

 

把参数换成这样的:

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.shadowColor = "gray";
        context.shadowOffsetX = -50;
        context.shadowOffsetY = -50;
        context.shadowBlur = 50;

        context.fillRect(200, 200, 400, 400);
    }

</script>

运行截图如下:

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

抵扣说明:

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

余额充值