专栏首页web前端教室html5-canvas刮刮卡实例-圆形刮痕

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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端面试大坑实录

    找工作嘛,要面试;公司招人嘛,也要面试。你面试是答题,公司招人是出题;双方都是陌生的,怎么凑成一对呢?就要靠面试题来牵线。在这个过程中呢,自然免不了要通过面试题...

    web前端教室
  • 学习前端的起点

    今天有同学问我,“零基础应该先从哪学啊”? 这个问题很好回答,“先从HTML,CSS,JS”,开始学起。 那么接下来会有第二个总是,“HTML或JS从哪开始学啊...

    web前端教室
  • 【笔记】web前端零基础课0904_学习笔记

    JavaScript,它的运行必须位于<script></script>标签之间,

    web前端教室
  • Unity3d和Android之间互相调用

    摘抄博客 Unity3d Android SDK接入解析(一)Unity3d 与 Android之间的互相调用,一共四章,一定要看完

    用户3112896
  • 第1章 简介

    IPC是进程间通信(interprocess communication)的简称。 每当在一个Unix函数中发生错误时,全局变量errno将被设置成一个指示错误...

    _gongluck
  • 记录k8s下配置ssl安全连接版rabbitmq

    因为有数据接入,公司要求启动ssl安全连接的方式把rabbitmq部署进k8s集群中。 首先,用CMF-AMQP-Configuration.git生成了证书...

    gzq大数据
  • 硅谷VS底特律:谁会培育出下一个伟大的汽车企业?

    我知道这次测试是经过精心安排的,而且会按照计划顺利实施,但是当我踩上福特Fusion小轿车的油门,直接向我前面停放的轿车加速的时候,我的身体开始紧张起来。 下...

    点滴科技资讯
  • 「JAVA」变量、表达式、数据类型、数据类型转换详解

    变量: 表示存储空间,可用来存放某一类型(整数、小数...)的数据,没有固定值,变量值是可变的,可重复使用,也可以用来存储某种类型的未知数据。

    老夫编程说
  • 那个把谷歌自动驾驶机密泄露给Uber的工程师,被特朗普赦免了

    Waymo 告 Uber 事件,近年来闹得沸沸扬扬。谷歌前工程师、无人驾驶公司 Otto(后被 Uber 收购)创始人安东尼 · 莱万多夫斯基(Anthony ...

    机器之心
  • errno 的使用

    error是一个包含在<errno.h>中的预定义的外部int变量,用于表示最近一个函数调用是否产生了错误。若为0,则无错误,其它值均表示一类错误。

    xuyaowen

扫码关注云+社区

领取腾讯云代金券