canvas刮刮效果实现

网页特效——刮刮效果实现。

首先分析一下,实现刮刮效果的原理,需要用到html5中的画布canvas,这是一个强大的提供绘制功能的标签,主要用在网页中的图表呈现,比如一些折线图、扇形图等,甚至在游戏开发当中也有广泛的运用,过多的介绍就不多说,刮刮效果需要会使用canvas实现基本的路径绘制,另外需要知道如何获取手指在页面当中的位置(方便跟踪手指移动并绘制),其次需要用到一个核心属性globalCompositeOperation,该属性设置或返回如何将一个源(新的)图像绘制到目标(已有的)的图像上,其属性值很多,请看下图,其中红色框选出来的属性值是刮刮效果实现的取值,新图像会以透明的效果出现:

需要设置canvas背景图如下:

接下来绘制一个与画布等宽高的矩形(已有图)以覆盖背景,如何再次绘制一个小矩形(新图),我们先测试一下核心属性,此时会看到下面的效果,通过小矩形(新图)透明效果看到了里面的背景奖项:

代码如下:

到这里那么实现刮刮效果就非常简单了,只需要将绘制的新图小矩形,换成鼠标追踪手指的位置即可,然后通过路径绘制的方式绘制出每一次鼠标点击移动的路径,代码如下:

最后看一下效果:

时间: 2024-10-08 00:52:19

canvas刮刮效果实现的相关文章

使用Canvas对象实现“刮刮乐”效果

在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

css3 canvas之刮刮卡效果

今天我有时间学习了一下html5新增的这个标签canvas,以前虽然经常写html5网页,可是都没用过这个标签.最近刚弄了一个h5微信送祝福的网页,差不多折腾了一个星期,所以我觉得我得系统的来学习一下html5和css3了. 好了,废话不多说,下面贴出我的代码. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <ti

canvas刮奖效果

上次写刮奖效果都一年前了,那时候还是百度找的源码给改的,自己其实也是迷迷糊糊的,这次因为让妹子写,然后想着自己也重新整理下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,

简单入门canvas - 通过刮奖效果来学习

一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下,通过一个刮奖效果来学习. 二.canvas基础 本文的目标是做一个刮奖效果,但是如果都不知道canvas是怎么回事,那么肯定也无法进行下去,所以先讲讲canvas基础吧. 首先,该怎么理解canvas,思来想去,最好的理解办法应该就是把canvas理解为一个空白的画纸,一张你可以在上面画画的纸. 然

canvas 擦除、刮刮卡效果

基于HTML5 Canvas技术实现的擦除.刮刮卡效果,轻轻刮去图层就可以模拟真实的效果. 原理:利用画布Canvas及其它自身API,在Canvas元素上绘制一个灰色蒙层,然后通过监听用户鼠标移到或手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片(或背景图),即达到擦除效果. HTML:(注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上) <canvas></canvas> Javascript: -- 1.禁用页面的鼠标选中拖动(

基于HTML5 canvas的jQuery刮刮卡效果

ScratchIt是一款基于HTML5 canvas的jQuery刮刮卡效果插件.这个刮刮卡效果使用两张图片和canvas来制作,可以使用鼠标擦除上面的图片,将下面的图片显露出来,模拟现实的刮刮卡效果. 效果演示:http://www.htmleaf.com/Demo/201506071985.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201506071984.html

canvas实现刮刮卡效果

canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.touchmove 完整代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content=&q

canvas实现移动端和PC端刮刮卡效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

canvas擦拭效果-刮刮卡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>刮刮卡</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalab