用Canvas制作剪纸效果
在做剪纸效果之前,先介绍剪纸效果运用到的一些知识:
阴影
在Canvas之中进行绘制时,可以通过修改绘图环境中的如下4个属性值来指定阴影效果:
- shadowColor:CSS格式的颜色字串。默认值为rgba(0,0,0,0),即完全透明的黑色。
- shadowOffsetX:阴影在X轴方向的偏移量,以像素为单位。默认值为0
- shadowOffsetY:阴影在Y轴方向的偏移量,以像素为单位。默认值为0
- shadowBlur:表示阴影效果如何延伸的double值。默认值为0.该值用于高斯模糊方程中,以便对阴影进行模糊化处理。
如果满足一下条件,那么使用Canvas的绘图环境对象就可以绘制出阴影效果了:
- 指定的shadowColor值不是全透明的。
- 在其余的阴影属性中,存在一个非0的值
不过,通常来说,使用半透明色来绘制阴影是个不错的选择,因为这样一来,背景就可以透过阴影显示出来了。
如果要禁用阴影效果,那就将shadowColor的属性设置为underfined。
如果为shadowOffsetX与shadowOffsetY属性设置了非0的正数值,无论绘制什么内容,它看起来都像是浮在了canvas之上,而且这些属性的值越大,我们就会觉得它在canvas上面浮动的越高。而负偏移量可以用来制作内嵌阴影效果。
非零环绕原则
在介绍非零环绕准则之前,先介绍一下CanvasRenderingContext2D之中与路径有关的arc()方法。arc()方法在当前路径中增加一段表示圆弧或圆形的子路径,可以通过一个boolean参数来控制该段子路径的方向。如果此参数是true,那么arc()所创建的子路径就是顺时针的,否则就是逆时针的。
如果当前路径是循环的,或者包含多个交叉的子路径,那么Canvas的绘图变量就必须要判断。
非零环绕原则指的是对于路径中的任意给定区域,从该区域内部画一条足够长的线段,使此线段的终点完全落在路径范围之外。如图所示,那三个箭头所描述的就是这个步骤。接下来,将计数器初始化为0,然后,每当这条线段与路径上的直线或曲线相交时,就改变计数器的值。如果是与路径的顺时针部分相交,则加1,如果是与路径的逆时针部分相交,则减1。若计数器的最终值不是0,那么此区域就在路径里面,在调用fill()方法时,浏览器就会对其进行填充。如果最终值是0,那么此区域就不在路径内部,浏览器也就不会对其进行填充了。
剪纸效果
如图所示为剪纸效果的图。
剪纸效果由两个圆形组成,其中一个圆形在另一个圆形的内部。通过设定arc()方法的最后一个参数,该程序以顺时针方向绘制了内部的圆形,并且以逆时针方向绘制了外围的圆形。浏览器运用“非零环绕规则”,对外围圆形的内部进行了填充,不过填充的范围并不包括里面的圆,这就产生了一种剪纸图案的效果。
代码如下:
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d');
//Function-------------------------------------------------
function drawTwoArcs(){
context.beginPath();
context.arc(300,190,150,0,Math.PI*2,false);
context.arc(300,190,100,0,Math.PI*2,true); context.fill();
context.shadowColor = undefined;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.stroke();
}
function draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.save(); context.shadowColor = 'rgba(0,0,0,0.8)';
context.shadowOffsetX = 12;
context.shadowOffsetY = 12;
context.shadowBlur = 15; drawTwoArcs();
context.restore();
} //Initialzation---------------------------------------------------------------
context.fillStyle = 'rgba(100,140,230,0.5)';
context.strokeStyle = context.fillStyle;
draw();
用Canvas制作剪纸效果的更多相关文章
- canvas制作雪花效果
<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" conte ...
- canvas制作倒计时效果
- 酷!使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
- H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
- 使用Canvas制作时钟动画
复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...
- Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏
Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...
- Canvas制作的下雨动画
简介 在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...
随机推荐
- Linux Tomcat 开机自启动的方法
修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/usr/java/j2sdk1.4.2_08 export CLASSPATH=$CLASSPATH:$JAV ...
- CAS登录时不仅仅需要用户名来确认身份的情况
最近在帮别人搞CAS,积累点经验 问题一:登录需要用户名和部门名称唯一确定一个用户,并将userid作为唯一标示. 在UsernamePasswordCredentials中添加userid 修改Qu ...
- 【BZOJ】3991: [SDOI2015]寻宝游戏
题意 给一个\(n\)个点带边权的树.有\(m\)次操作,每一次操作一个点\(x\),如果\(x\)已经出现,则\(x\)消失.否则\(x\)出现.每一操作后,询问从某个点开始走,直到经过所有出现的点 ...
- Linux安装软件总结(二.几种安装命令介绍)
一.rpm包安装方式步骤: 1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录: 2.打开一个终端,su -成root用户: 3.cd soft.version.rpm所在 ...
- chrome浏览器 模拟访问移动端
谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器.在Windows的[开始]-->[运行]中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页: 谷歌Android ...
- WPF整理-XAML访问静态属性
"XAML provides an easy way to set values of properties—type converters and the extended propert ...
- “菜”鸟理解.NET Framework(CLI,CLR,CTS,CLS,BCL,FCL)
既然要学.NET,就要先认识认识她,我不喜欢大段大段文字的东西,自己通过理解,画个图,来看看.NET的沉鱼落雁,闭月羞花之容. 最下层蓝色部分是.NET Framework的基础,也是所有应用软件的基 ...
- 使用MyBatis对表执行CRUD操作
一.使用MyBatis对表执行CRUD操作——基于XML的实现 1.定义sql映射xml文件 userMapper.xml文件的内容如下: <?xml version="1.0&quo ...
- find_elements后点击不了抓取的元素
1.莫名其妙抓不到元素,要去看句柄,是不是没有切换 h=driver.current_window_handle nh=driver.window_handles for i in nh: if i! ...
- redis 简单应用
Incr $views = Redis::incr('views'); $article_views = Redis::incr('article:' . $article_id . ':views' ...