canvas写的一个刮奖效果

<!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content="刮奖"> <meta…

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

HTML5 Canvas实战之刮奖效果

近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理原理很简单,就是在刮奖区添加两个canvas,第一个canvas用于显示刮开后显示的内容,可以是一张图片或一个字符串,第二个canvas用于显示涂层,可以用一张图片或用纯色填充,第二个canvas覆盖在第一个canvas上面. 当在第二个canvas上点击或涂抹(点击然后拖动鼠标)时,把点击区域变为透明,这样就可以看到第一个canvas上的内容…

HTML5实现刮奖效果

原文:HTML5实现刮奖效果要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperation,这个属性有多个值,而实现刮奖效果要用到的值就是destination-out.意思就是:在已有内容和新图形不重叠的地方,已有内容保留,所有其他内容成为透明.这样可能不好理解,后面实现的时候会解释.有了globalCompositeOperation这个属性,实现过程就很简单了. 我们需要有两个…

使用MDScratchImageView实现刮奖效果

使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // // RootViewController.m // Scratch // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "MDScratchI…

canvas写的一个小时钟demo

<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> <script> function time(){ var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); //清空画布, mycontext…

canvas 利用canvas中的globalCompositeOperation 绘制刮奖效果

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> body { height: 1000px; } </style> </head> <body> <div style="position: relative; width: 300p…

HTML5 Canvas实战之刮奖效果【转】

开源项目地址:https://github.com/artwl/Lottery 作者博客地址:http://www.cnblogs.com/jscode/p/3580878.html 谢谢浏览!…

[原创]基于html5新标签canvas写的一个小画板

最近刚学了canvas,写个小应用练习下源代码 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script src="http://ajax.googleapis.com/ajax/libs/…

[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var digital = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0…

使用PorterDuffXfermode画出刮刮奖效果p146-p148

package com.zzw.Qunyinzghuan3; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphic…

canvas刮刮乐效果（pc端&H5、zepto-touchmove）

一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;"> <div style="width:300px;height:200px;background: #3083e1;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-w…

使用HTML5实现刮刮卡效果

你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. 教程地址:http://www.helloweba.com/view-blog-270.html 演示地址:…

JS框架_(JQuery.js)模拟刮奖

百度云盘:传送门密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&qu…

【Android界面实现】使用Canvas对象实现“刮刮乐”效果

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

用C3中的animation和transform写的一个模仿加载的时动画效果

用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h2>用C3中的animation和transform写的一个模仿加载的时动画效果</h2> <div class="demo"> <div></div> <div></div> <div></d…

用Canvas写一个简单的游戏--别踩白块儿

第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用再扯了,大家应该都懂,不懂的看到黑色的就点就是了,扯多了我打字手也累,大概.链接给你们:http://nowtd.cn/white/ 咱不是理论派,所以在这里不会扯多少理论. 首先看看html的结构吧 <header class="container"> <article…

canvas实现刮刮卡效果

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

用Canvas画一个刮刮乐

Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.canvas是HTML5中的新元素,使用javascript用它来绘制图形.图标.以及其它任何视觉性图像. 在国外问答网站Quora上,许多开发者对于HTML5 Canvas元素的实用性进行了一系列探讨.Canvas非常灵活,能够很好地融合JavaScript代码并在浏览器内绘制华丽的图…

用js写出一个漂亮的单选框选中效果

一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图片定位到右图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javasc…

利用canvas写一个验证码小功能

刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <…

Android 自定义控件实现刮刮卡效果真的就只是刮刮卡么

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡效果~~上次看到有人写Android的刮刮卡效果~~于是乎产生了本篇博客~~此类例子也比较多了,大家可以百度看看~不过还是通过本例子,带大家发掘一下,里面隐含的知识~ 1.Xfermode以及PorterDuff 如果大家还记得,曾经在博客:完美实现图片圆角和圆形简单介绍过圆角的实现原理也是基于这…

Android项目刮刮奖详解（四）

Android项目刮刮奖详解(三) 前言上一期我们已经是完成了刮刮卡的基本功能,本期就是给我们的项目增加个功能以及美化一番目标增加功能用户刮卡刮到一定程度的时候,清除遮盖层在遮盖层放张图片,增加用户体验增加一个刮完奖回调监听实现 1.自动消除效果我们首先来了解一下bitmap的getPixels方法 getPixels(@ColorInt int[] pixels, int offset, int stride,int x, int y, int width, int heigh…

Android项目刮刮奖详解扩展篇——开源刮刮奖View的制作

Android项目刮刮奖详解(四) 前言我们已经成功实现了刮刮奖的功能了,本期是扩展篇,我们把这个View直接定义成开源控件,发布到JitPack上,以后有需要也可以直接使用,关于自定义控件的知识,不了解的同学可以看这下面我之前写的这两篇 Android 自定义控件 Android开发--发布第三方库到JitPack上实现定义属性 text 文字内容 textColor 文字颜色 textSize 文字大小 paintSize 擦除效果的宽度 messageBackground 中奖图片…

Android 自己定义控件实现刮刮卡效果真的就仅仅是刮刮卡么

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮卡效果~~上次看到有人写Android的刮刮卡效果~~于是乎产生了本篇博客~~此类样例也比較多了,大家能够百度看看~只是还是通过本样例,带大家发掘一下.里面隐含的知识~ 1.Xfermode以及PorterDuff 假设大家还记得,以前在博客:完美实现图片圆角和圆形简介过圆角的实现原理也是基于这个…

Html5实现移动端、PC端刮刮卡效果

刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛干嘛不早说呢?????真是自找麻烦.既然写了就分享给大家吧,这个效果其实很早就有了,只是我们不常用到罢了.H5的Canvas我很坦然的说我不会.但是既然工作上需要就需要学习一下了.虽然有demo但是自己写的时候还是出现了很多的bug.下面给大家说一下实现刮刮卡效果的步骤吧.(ps:按照我自己的dem…