使用html5的画布特性，我们可以创建图形，在这片文章中，我们将创建图形的阴影。
代码：
var canvas = document.getElementById('shadowcanvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 15; // 阴影Y轴偏移
ctx.shadowOffsetY = 15; // 阴影X轴偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色
ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
ctx.fillStyle = '#222222';
ctx.beginPath();
ctx.arc(350, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
这段代码中，我们首先得到画布并取得context，调用方法添加阴影相关属性，包括了偏移，模糊和阴影颜色。最后调用canvas方法生成图形，这里我们为了更好的对比效果，分别生成了2个圆形，一个包含阴影，一个不包含阴影。
注意：以上阴影属性，至少得设置颜色和模糊度。
立即学习“前端免费学习笔记（深入）”；
运行代码：
GBdebug在线调试地址：www.gbin1.com/gb/debug/5b6fd9cb-6bdf-4a7f-8f20-4ea73bf9ae76.htm
以上就是使用HTML5画布（canvas）生成阴影效果的内容，更多相关内容请关注PHP中文网（www.php.cn）！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
887
