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的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 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 URL编码解码函数代码
2009/03/10 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
matplotlib中legend位置调整解析
2017/12/19 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python装饰器用法实例总结
2018/02/07 Python
python迭代dict的key和value的方法
2018/07/06 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
python框架flask表单实现详解
2019/11/04 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
vue路由实现登录拦截
2021/03/24 Vue.js
python requests模块的使用示例
2021/04/07 Python
mysql 索引合并的使用
2021/08/30 MySQL