HTML5 canvas基本绘图之绘制阴影效果
发布时间：2016-06-27 10:42:22 作者：佚名 
我要评论
我要评论<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制阴影方法，感兴趣的小伙伴们可以参考一下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。
<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在<canvas>>元素上绘图主要有三步：
1.获取<canvas>元素对应的DOM对象，这是一个Canvas对象；
2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
3.调用CanvasRenderingContext2D对象进行绘图。
阴影绘制：
- shadowColor 设置或返回用于阴影的颜色。
- shadowBlur 设置或返回用于阴影的模糊级别（数值越大越模糊）。
- shadowOffsetX 设置或返回阴影与形状的水平距离。
- shadowOffsetY 设置或返回阴影与形状的垂直距离。
我们为之前绘制的五角星添加一下阴影
JavaScript Code复制内容到剪贴板
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- context.beginPath();
- //设置是个顶点的坐标，根据顶点制定路径
- for (var i = 0; i < 5; i++) {
- context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,
- -Math.sin((18+i*72)/180*Math.PI)*200+200);
- context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,
- -Math.sin((54+i*72)/180*Math.PI)*80+200);
- }
- context.closePath();
- //设置边框样式以及填充颜色
- context.lineWidth="3";
- context.fillStyle = "#F6F152";
- context.strokeStyle = "#F5270B";
- context.shadowColor = "#F7F2B4";
- context.shadowOffsetX = 30;
- context.shadowOffsetY = 30;
- context.shadowBlur = 2;
- context.fill();
- context.stroke();
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
这篇文章主要介绍了canvas 阴影和图形变换的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-02- 这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影+边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下2016-03-25
- 这篇文章主要介绍了html5实现canvas阴影效果示例2014-05-07
- HTML5 Canvas中提供了设置阴影的四个属性值可以实现阴影文字、3D拉影效果、边缘模糊效果文字，具体的演示代码如下，想学习的朋友可以参考下2013-08-02
这篇文章主要介绍了canvas多重阴影发光效果实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2021-04-19
最新评论