美文网首页
HTML5 给图形绘制阴影

HTML5 给图形绘制阴影

作者: 暖A暖 | 来源:发表于2020-06-30 09:47 被阅读0次

在 HTML5 中,我们除了上一节讲过的可以对图形设置平移、旋转、缩放,还可以给图形添加阴影效果。添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦。

图形阴影绘制的属性

属性 描述
shadowOffsetX 阴影的横向位移量
shadowOffsetY 阴影的纵向位移量
shadowBlur 阴影的模糊范围
shadowColor 阴影的颜色

shadowOffsetX 属性和 shadowOffsetY 属性分别用于设置阴影在 X 轴和 Y 轴的延伸距离,属性值为正值表示向下或向右延伸,负值表示向上或向左延伸。

shadowBlur 属性用于设置阴影的模糊度,当我们不希望图形的阴影太清晰时,可以使用这个属性。属性值为必须为正值,否则无效哟,一般设定在 0到10 之间。

shadowColor 属性值用于设置阴影的颜色,属性值可以为任意标准的 CSS 颜色值,默认颜色为黑色。

给图形绘制阴影

例如给一个粉色的矩形绘制阴影。

示例:

绘制向右偏移 10 像素的阴影:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5学习(9xkd.com)</title>
        </head>
        <body>
            <canvas id="mycanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
            <script>
                var can = document.getElementById("mycanvas");
                var ctx = can.getContext("2d");
                ctx.shadowOffsetX = 10;
                ctx.shadowBlur = 10;
                ctx.shadowColor="#000";
                ctx.fillStyle = "pink";  // 填充颜色
                ctx.fillRect(50, 50, 150, 70);
            </script>
        </body>
    </html>    

在浏览器中的演示效果:


可以看到上图中,阴影的位置向右偏移,如果想要阴影向左偏移,可以将shadowOffsetX 的值设置为负数。

示例:

如果要绘制向上偏移 20 像素的阴影,则不需要设置 shadowOffsetX,而是设置 shadowOffsetY 属性,正值为向下偏移,负值为向上偏移:

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowOffsetY = -20;
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 设置透明度
ctx.fillStyle = "pink";  // 填充颜色
ctx.fillRect(50, 50, 150, 70);

在浏览器中的演示效果:


可以看到这张截图中,矩形的阴影颜色要比上面示例中淡一点。这是因为我们在给阴影设置颜色时,指定了一个透明度,用到了 rgba() 函数,函数中第四个参数用于设置透明度,值为 0~1 之间的小数,0表示完全透明,1表示不透明。

示例:

给四个边设置阴影:

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 设置透明度
ctx.fillStyle = "pink";   // 填充颜色
ctx.fillRect(50, 50, 150, 70);

在浏览器中的演示效果:


在实际应用中,其实我们会经常用到阴影,例如给导航栏添加阴影、给按钮添加阴影、给图片添加阴影等,这样看上去就会更立体一些,增加层次感。

了解更多可查看链接:https://www.9xkd.com/

相关文章

  • HTML5 给图形绘制阴影

    在 HTML5 中,我们除了上一节讲过的可以对图形设置平移、旋转、缩放,还可以给图形添加阴影效果。添加阴影的时候只...

  • 初识canvas(二)

    上节文章中,给大家分享了canvas最基础的用法,包括绘制线条、控制渲染方式、绘制图形、作用域、添加阴影、清理、剪...

  • canvas的简单介绍和快速上手

    简介 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。例如,它可以用于绘制图形,...

  • 使用实现画板

    源码预览 是 HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。例如,它可以用于绘制图形...

  • Canvas(一个html元素

    是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。例如,它可以用于绘制图形,制作照片,...

  • 学习笔记-Canvas-2017.2.9

    HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。 标签只是图形容器,必须使用...

  • html5使用canvas绘制图片并下载

    一、简介HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形容器,...

  • HTML5 CANVAS

    简单初步: 创建画布 绘制矩形 绘制图形 绘制图片 HTML5使用路径 制作简单动画 1.使用setInterva...

  • HTML画布——canvas

    HTML5画布——canvas HTML5元素用于图形的绘制,通过脚本 (通常是 JavaScript )来完成....

  • Quartz 2D 概念、图形上下文、路径

    Quartz 2D是二维图形绘制引擎,可以实现N多图形图像的操作功能,如基本路径的绘制、透明度、描影、绘制阴影、透...

网友评论

      本文标题:HTML5 给图形绘制阴影

      本文链接:https://www.haomeiwen.com/subject/pvytqktx.html