html5-canvas刮刮卡实例-圆形刮痕

知识点

1、globalCompositeOperation属性,该属性表示的是图形的组合方式

2、使用到的是destination-out,它表示只绘制原图形与新图形不重叠的部分;原图形与新图形重叠的部分变透明。

3、对此时对touchmove方法中的代码再做修改,添加closePath方法。

4、画圆的arc方法

5、Math.PI*2

实现圆形刮痕的canvas刮刮卡视频教程,请点此链接:

https://v.qq.com/iframe/player.html?vid=d0166qkp08w&width=670&height=502.5&auto=0

附:html5-canvas 最简单的刮刮卡实例

本例重点:

getContext:返回一个用于在画布上绘图的环境。

clearRect:清空给定矩形内的指定像素。

实例视频请点此链接:

https://v.qq.com/iframe/player.html?vid=i0165619pju&width=670&height=502.5&auto=0

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2015-09-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一枝花算不算浪漫

[Java面试九]脚本语言知识总结.

415130
来自专栏菩提树下的杨过

silverlight中的几个冷门标记 {x:Null},d:DesignWidth,d:DesignHeight

{x:Null}:用于设置某属性值为Null,比如<Rectangle Fill="{x:Null}" />,其实就相当于<Rectangle />,个人感觉这...

20860
来自专栏C/C++基础

web前端开发初学者十问集锦(3)

我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度,否则无效。

10020
来自专栏Modeng的专栏

Vue2.5笔记:Class与Style几种绑定用法

在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了...

16510
来自专栏weixuqin 的专栏

Scrapy选择器的用法

370120
来自专栏阮一峰的网络日志

jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQue...

55160
来自专栏个人随笔

初识CSS3

1.CSS规则由两部分构成,即选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句...

34380
来自专栏javascript趣味编程

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

17900
来自专栏Golang语言社区

go语言实现文件分割的方法

import ( // "bufio" "flag" "fmt" "io" "os" ) import "strconv" var infile *s...

3.2K70
来自专栏极客慕白的成长之路

JavaScript实现计算器方法拓展

除特别注明外,本站所有文章均为慕白博客原创,转载请注明出处来自https://geekmubai.com/programming/757.html

25110

扫码关注云+社区

领取腾讯云代金券