HTML5 canvas基本绘图之绘制阴影效果


Posted in HTML / CSS onJune 27, 2016

<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复制内容到剪贴板
  1. var canvas = document.getElementById("canvas");   
  2.    var context = canvas.getContext("2d");   
  3.    context.beginPath();   
  4.    //设置是个顶点的坐标,根据顶点制定路径   
  5.    for (var i = 0; i < 5; i++) {   
  6.        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
  7.                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
  8.        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
  9.                        -Math.sin((54+i*72)/180*Math.PI)*80+200);   
  10.    }   
  11.    context.closePath();   
  12.    //设置边框样式以及填充颜色   
  13.    context.lineWidth="3";   
  14.    context.fillStyle = "#F6F152";   
  15.    context.strokeStyle = "#F5270B";   
  16.    context.shadowColor = "#F7F2B4";   
  17.    context.shadowOffsetX = 30;   
  18.    context.shadowOffsetY = 30;   
  19.    context.shadowBlur = 2;   
  20.    context.fill();   
  21.    context.stroke();   

效果如下:

HTML5 canvas基本绘图之绘制阴影效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 #HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 #HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 #HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 #HTML / CSS
HTML5 Web 存储详解
Sep 16 #HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 #HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 #HTML / CSS
You might like
php文档更新介绍
2011/07/22 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
javascript实用方法总结
2015/02/06 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
财务分析个人的自荐书范文
2013/11/24 职场文书
思想汇报格式
2014/01/05 职场文书
保安队长职务说明书
2014/02/23 职场文书
工程质量承诺书
2014/03/27 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
特此通知格式
2015/04/27 职场文书
遗嘱格式范本
2015/08/07 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书