小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man
本篇继续介绍html5的一些状态值,html5的绘制上下文提供了丰富的效果,本篇介绍阴影的效果,阴影有四个状态值控制,分别是shadowBlur,shadowOffsetX,shadowOffsetY和shadowColor。其中shadowBlur为阴影的像素模糊值,shadowOffsetX和shadowOffsetY为阴影在x轴和y轴上的偏移值,shadowColor为阴影颜色值,其中默认的值是前三个值都为0,最后一个值设置为透明黑色。只需修改其中的两个值就可以显现出来阴影效果,如下面的例子所示,同时下面的例子也证明了他是一个状态值,也可以使用save保存和restore弹出。
绘制的代码如下
context.fillStyle="red";
context.save();
context.shadowBlur=20;
context.shadowColor="rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);
这里只是把阴影颜色设置为红色,由于x和y的偏移值都没有设置,所以默认的就是这样的阴影包围状态,shadowColor设置为全不透的红色,也可以通过argb值来设置透明度,但是对应阴影的区别不大:
修改为如下的代码,效果如下:
绘制的代码如下:
context.fillStyle="red";
context.save();
context.shadowBlur=20;
context.shadowColor="rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.shadowColor="argb(255,0,0,0.5)";
context.fillRect(200,50,100,100);
阴影在x轴和y轴上的偏移值,顾名思义,就是让阴影发生偏移,分别在x轴和在y轴上偏移相应的距离。效果如下:
context.fillStyle="red";
context.shadowBlur=20;
context.shadowColor="rgb(255,0,0)";
context.shadowOffsetX=15;
context.shadowOffsetY=15;
context.fillRect(50,50,100,100);
阴影不止适用于正方形,其他图形也可以:
context.fillStyle="red";
context.shadowBlur=20;
context.shadowColor="rgb(255,0,0)";
context.shadowOffsetX=15;
context.shadowOffsetY=15;
context.beginPath();//开始路径
context.arc(100,100,60,Math.PI/6,Math.PI,true);
context.closePath();
context.fill();//填充
context.beginPath();//开始路径
context.moveTo(200,50);//设置路径,参数为原点
context.lineTo(360,50);//设置路径直到本线段的终点
context.lineTo(360,150);//设置路径直到本线段的终点
context.closePath();//结束路径
context.fill();//正式绘制
如有错误,希望大家多多指正
下一篇继续研究绘制的高级功能
分享到:
相关推荐
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
html5-canvas-border-pixel-progressbar源码
html5-canvas-3d-earth-rotate.zip
html5-canvas-3d-line-avatar.zip
html5-canvas-520-love-cartoon-codes(jb51.net).rar
html2canvas-1.0.0-rc.4版本
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
javascrip canvas画布,实现动态背景。
canvas-js-动画-例子
判断浏览器是否支持canvas,具体代码如下: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
通过HTML5+Canvas开发详解(第2版),你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画,而这些是开发交互式Web游戏的必备知识。 本书针对Canvas和HTML5技术的最新变动进行了更新,其中包含了大量清晰...
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
今天我们要给大家分享一款基于HTML5的3D粒子动画,该动画主要在Canvas画布上绘制粒子形的文字和3D模型,并且实现2D粒子文字与3D粒子模型之间的转换动画。在转换过程中,粒子从被打散到重新组合,动画效果非常炫酷,...
具有Discord表情符号支持的node-canvas-with-twemoji的分支。 这是一个能够在节点画布上绘制表情符号的模块。 安装 $ npm install node-canvas-with-twemoji-and-discord-emoji 快速范例 const { createCanvas } = ...
我将尝试通过创建一系列教程来解决此问题,以说明文本编辑器的所有重要方面,同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表: 键盘光标导航和选择; ...