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 animation实现逐帧动画效果
Jun 02 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
python正则分组的应用
2013/11/10 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python解析xml简单示例
2019/06/21 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python 日志 logging模块详细解析
2020/03/31 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
会议邀请书范文
2014/02/02 职场文书
外联部演讲稿
2014/05/24 职场文书
技校毕业生自荐信
2014/06/03 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
三好学生事迹材料
2014/12/24 职场文书
跑出一片天观后感
2015/06/08 职场文书
在职证明书模板
2015/06/15 职场文书
MySQL的join buffer原理
2021/04/29 MySQL