HTML5 Canvas 开发绘图方法整理【十一、Canvas图形阴影&&文字阴影效果】

待我称王封你为后i 2022-05-31 09:49 397阅读 0赞

#### 关于Canvas 阴影效果 分以下四种属性： ####

ctx.shadowBlur 设置阴影的模糊级别  
ctx.shadowOffsetX 设置形状与阴影的水平距离。  
ctx.shadowOffsetY 设置形状与阴影的垂直距离。  
ctx.shadowColor 设置阴影的颜色

在CSS3 中也有阴影的效果，两种用起来效果基本相同。

阴影效果可以用在图形，文字还有图片里，巧妙的运用阴影可以做出很好的样式

<script>
        window.onload=function () {
            let cans = document.getElementById("seventhC");
            let ctx = cans.getContext("2d");
    
            //图形阴影
            ctx.shadowOffsetX=0;
            ctx.shadowOffsetY=0;
            ctx.shadowColor="#f00";
            ctx.shadowBlur=15;
            ctx.fillStyle="#FFF500";
            ctx.fillRect(30,20,70,70);
    
            //文字阴影
            ctx.shadowOffsetX=-5; //将阴影设在左上角 需要设在右下角改成正整数即可
            ctx.shadowOffsetY=-5;
            ctx.shadowColor="#03DB90";
            ctx.shadowBlur=15;
            ctx.font="bold 30px KaiTi";
            ctx.strokeStyle="#15A2FF";
            ctx.strokeText("阴影文字",50,150);
        };
    
    </script>

效果图：  
![这里写图片描述][70]

[70]: /images/20220531/2f4f896828b24e489798e0d8b18d8ef5.png

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML5 Canvas 绘图方法整理【十七、Canvas透明度 / 图形叠加、层次、冲突】

Canvas 设置透明度：语法： ctx.globalAlpha= 属性值; 属性值是 0 - 1之间的数字。同CSS一样的透明度属性值不过fillStyle

不念不忘少年蓝@/ 2022年05月31日 11:44/ 0 赞/ 586 阅读

相关 HTML5 Canvas 开发绘图方法整理【十二、Canvas重点之：路径】

Canvas 路径可以说是一个非常的！相当的！重要的东西，除了矩形，其他基本所有图形都是以路径为基础的。路径操作有三种方法： beginPath() 起始一条

川长思鸟来/ 2022年05月31日 09:49/ 0 赞/ 322 阅读

相关 HTML5 Canvas 开发绘图方法整理【十一、Canvas图形阴影&&文字阴影效果】

关于Canvas 阴影效果分以下四种属性： ctx.shadowBlur 设置阴影的模糊级别 ctx.shadowOffsetX 设置形状与阴影的水平距离。 c

待我称王封你为后i/ 2022年05月31日 09:49/ 0 赞/ 398 阅读

相关 HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

基础渐变三部曲：语法： 1、创建渐变对象 ctx.createLinearGradient(x0,y0,x1,y1); x0,y0 渐变开始点坐标 x1,y

╰+哭是因爲堅強的太久メ/ 2022年05月31日 09:49/ 0 赞/ 316 阅读

相关 HTML5 Canvas 开发绘图方法整理【八、Canvas 转换】

Canvas 转换方法：所有单位默认为 “px ” ; 转换： Canvas 转换方法：所有单位默认为 “px ” ; translate() 重新映射画布上的

我不是女神ヾ/ 2022年05月31日 09:17/ 0 赞/ 282 阅读

相关 HTML5 Canvas 开发绘图方法整理【五、canvas text / 文本、文字相关】

关于 Canvas文本的方法和属性如下： ![这里写图片描述][70] 另外再加上 fillStyle() 与 strokeStyle(); 一般情况下都是 fill

梦里梦外;/ 2022年05月31日 09:05/ 0 赞/ 431 阅读

相关 HTML5 Canvas 开发绘图方法整理【四、canvas曲线图形 / 圆形】

其实在Canvas 中的基本图形就只有两个：直线图形和曲线图形。圆形也算是在曲线图形中，一般画圆的时候必须配套使用 beginPath() 和 closePath

绝地灬酷狼/ 2022年05月31日 08:45/ 0 赞/ 285 阅读

相关 HTML5 Canvas 开发绘图方法整理【二、canvas直线 & canvas矩形】

开始绘制图形之前有一点需要说一下，Canvas 采用的坐标系是W3C的坐标系： X轴正方向向右; Y轴正方向向下; 所有的绘制方向都以这个为准。

红太狼/ 2022年05月31日 07:50/ 0 赞/ 539 阅读

相关使用HTML5画布（canvas）生成阴影效果

日期：2013-7-12 来源：[GBin1.com][] [![使用HTML5画布（canvas）生成阴影效果][HTML5_canvas]][HTML5_canvas_

柔光的暖阳◎/ 2022年01月09日 23:47/ 0 赞/ 300 阅读

相关 canvas给文字增加阴影效果

var canvas = document.getElementById('canvas'); canvas.width='300'; canv

不念不忘少年蓝@/ 2021年07月24日 19:06/ 0 赞/ 602 阅读