canvas创建阴影

最新推荐文章于 2024-05-17 09:31:23 发布

JinmyHe

最新推荐文章于 2024-05-17 09:31:23 发布

阅读量313

点赞数

分类专栏： web前端-动画图形文章标签： canvas

本文链接：https://blog.csdn.net/weixin_42659625/article/details/82779010

版权

web前端-动画图形专栏收录该内容

19 篇文章 1 订阅

订阅专栏

我们可以使用4个参数给画布上的形状添加阴影。

shadowOffsetX

shadowOffsetY

shadowBlur

shadowColor

例子：给对象添加阴影

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                context.fillStyle = 'red';

                context.shadowOffsetX = 4;
                context.shadowOffsetY = 4;
                context.shadowColor = 'black';
                context.shadowBlur = 4;
                context.fillRect(10, 10, 100, 100);

                context.shadowOffsetX = -4;
                context.shadowOffsetY = -4;
                context.shadowColor = 'black';
                context.shadowBlur = 4;
                context.fillRect(150, 10, 100, 100);

                context.shadowOffsetX = 10;
                context.shadowOffsetY = 10;
                context.shadowColor = 'rgb(100,100,100)';
                context.shadowBlur = 8;
                context.arc(200, 300, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                context.fill();
            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="500">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>

JinmyHe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas创建阴影

我们可以使用4个参数给画布上的形状添加阴影。shadowOffsetXshadowOffsetYshadowBlurshadowColor例子：给对象添加阴影&lt;!DOCTYPE HTML&gt;&lt;html lang="cn"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&am
复制链接

扫一扫

专栏目录