Canvas阴影绘制

港控/mmm° 2021-12-15 00:37 366阅读 0赞

阴影的绘制主要依赖以下四个属性：

*  `shadowOffsetX`：阴影x方向的偏移距离
 *  `shadowOffsetY`：阴影y方向的偏移距离
 *  `shadowColor`：阴影的颜色
 *  `shadowBlur`：阴影的模糊半径

const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    // 阴影的x偏移
    ctx.shadowOffsetX = 10;
    // 阴影的y偏移
    ctx.shadowOffsetY = 10;
    // 阴影颜色
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    // 阴影的模糊半径
    ctx.shadowBlur = 10;
    ctx.fillStyle = 'rgba(255,0,0,0.5)'
    ctx.fillRect(100, 100, 100, 100);

![\[外链图片转存失败(img-EQTAwdiA-1562207515964)(http://note.youdao.com/yws/res/16059/550C822FB8EE406F95771780A950E224)\]][img-EQTAwdiA-1562207515964_http_note.youdao.com_yws_res_16059_550C822FB8EE406F95771780A950E224]

需要注意的是，阴影的偏移是以绘制图形的左上角为坐标原点来计算的。

而且，设置的阴影相关属性会对后面绘制的图形产生影响。

const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    // 阴影的x偏移
    ctx.shadowOffsetX = 10;
    // 阴影的y偏移
    ctx.shadowOffsetY = 10;
    // 阴影颜色
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    // 阴影的模糊半径
    ctx.shadowBlur = 10;
    ctx.fillStyle = 'rgba(255,0,0,0.5)'
    ctx.fillRect(100, 100, 100, 100);
    ctx.font = '50px sans-serif';
    ctx.fillText('Hello Wolrd');

![\[外链图片转存失败(img-wZVuYFu1-1562207515969)(https://note.youdao.com/src/33B43165F21D4FD19FF86EB376978435)\]][img-wZVuYFu1-1562207515969_https_note.youdao.com_src_33B43165F21D4FD19FF86EB376978435]

[img-EQTAwdiA-1562207515964_http_note.youdao.com_yws_res_16059_550C822FB8EE406F95771780A950E224]: /images/20211214/52d46996eb3044ab939c11ecd7aa055e.png
[img-wZVuYFu1-1562207515969_https_note.youdao.com_src_33B43165F21D4FD19FF86EB376978435]: /images/20211214/30b91a8bd61b4b7f8ca0ee0ee00e2e08.png

发表评论取消回复

表情：

评论列表（有 0 条评论，366人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas绘制多种文字效果：描边，阴影，渐变色等

canvas可以绘制多种样式的文字效果：比如渐变，阴影，描边等效果，如下图：![c27c078be91c4e7bb92361cd265b2251.png][] 示例代码：

系统管理员/ 2024年03月27日 18:17/ 0 赞/ 81 阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 259 阅读

相关 canvas绘制七巧板

首先推荐的课程学习是《[炫丽的倒计时效果Canvas绘图与动画基础][Canvas]》，感谢liuyubobobo的讲解。偶然之间发现了这门canvas的课程，本来一直都在

落日映苍穹つ/ 2022年08月12日 01:17/ 0 赞/ 232 阅读

相关 Canvas阴影绘制

阴影的绘制主要依赖以下四个属性： `shadowOffsetX`：阴影x方向的偏移距离 `shadowOffsetY`：阴影y方向的偏移距离 `shadow

港控/mmm°/ 2021年12月15日 00:37/ 0 赞/ 367 阅读

相关 Canvas绘制曲线

文章目录圆弧贝塞尔曲线圆弧圆弧使用`arc`方法绘制，画圆的时候画的弧度是从0到2π，而想要画圆弧就调整参数只画出部分圆即可。 co

深碍√TFBOYSˉ_/ 2021年12月14日 13:49/ 0 赞/ 636 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 517 阅读

相关 canvas绘制矩形

canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框

旧城等待，/ 2021年07月24日 21:51/ 0 赞/ 486 阅读

相关 canvas绘制直线

说明： lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 s

迈不过友情╰/ 2021年07月24日 16:57/ 0 赞/ 524 阅读

相关 canvas 基本绘制、矩形、渐变、阴影、全局透明度、图层

canvas 用来'替代'flash等其他用于做动画或游戏的插件的一个标签 1、可以理解为div,提供一个区域用来绘制图形 2、

た入场券/ 2021年07月24日 16:12/ 0 赞/ 1181 阅读

相关 canvas 图片绘制、视频绘制

canvas 1.canvas中绘制图片: img对象.onload=function(){ bi.drawImage

た入场券/ 2021年07月24日 11:36/ 0 赞/ 549 阅读