刮刮乐html5效果,HTML5 简单实现刮刮乐效果

doctype html>

script>

JS刮刮乐title>

}#myCanvas{position:absolute;left:0;top:0;

}

style>

head>

canvas>

div>

vararr=["img/aa.png","img/bb.png","img/cc.png","img/dd.png"];

window.οnlοad= function(){

console.log((Math.random()*3).toFixed(0)+"+"+arr[(Math.random()*3).toFixed(0)]);varmyCanvas=document.getElementById("myCanvas");varcan=myCanvas.getContext("2d");varX=myCanvas.width;varY=myCanvas.height;varoImg= newImage();

oImg.οnlοad= function(){

can.beginPath();

can.drawImage(oImg,0,0,X,Y);

can.closePath();

}vartochstrat=device?"touchstart":"mousedown";vartochmove=device?"touchmove":"mousemove";vartochend=device?"touchend":"mouseup";functiondraw(event){varx=device?event.touches[0].clientX:event.clientX;vary=device?event.touches[0].clientY:event.clientY;

console.log("X:"+x+"Y:"+y);

can.beginPath();//

can.globalCompositeOperation= "destination-out";

can.arc(x,y,20,0,Math.PI*2,false);

can.fill();

can.closePath();

}

myCanvas.addEventListener(tochstrat,function(){

myCanvas.addEventListener(tochmove,draw,false);

},false);

myCanvas.addEventListener(tochend,function(){

myCanvas.addEventListener(tochmove,draw,false);

},false);

$("#box").css("background-image","url("+arr[(Math.random()*3).toFixed(0)]+")");

}script>

body>

html>

刮刮乐html5效果,HTML5 简单实现刮刮乐效果相关推荐

html效果浮窗效果,jQuery简单实现中间浮窗效果
本文实例讲述了jQuery简单实现中间浮窗效果.分享给大家供大家参考,具体如下: basic.css: /* * -- 样式说明 -- * 最大优先实现法,全局能实现不用区域,区域能实现不用模板,模板 ...
刮刮奖效果的简单实现
刮刮奖效果的简单实现无意中看到个刮刮奖的效果,觉得很有意思.就想自己也做一个,怎样用html5及javascript实现呢,回忆以前做报表的时候,用过html5 canvas元素.心里就有思路了. ...
html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
目的: 利用html5,css实现钟摆效果知识点: 1) 利用position/left/top和calc()实现元素的水平和垂直居中: 2) 利用CSS3的animation/transform/ ...
【HTML5】简单实现QQ聊天气泡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
php中文歌词,详细介绍HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...
html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: www.jb51.net canvas实现加载条动画 /* * 获取canvas, ca ...
html 写字版插件,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
写字板能用html语言吗,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
html如何添加时钟效果,HTML5实现时钟效果
以下是完整代码,保存到html文件可以查看效果. HTML5时钟-柯乐义柯乐义原文 HTML5时钟柯乐义提示您,请使用支持HTML5的浏览器,例如Chrome,IE9,IE10,Firefox等 ...
html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...

刮刮乐html5效果,HTML5 简单实现刮刮乐效果

刮刮乐html5效果,HTML5 简单实现刮刮乐效果相关推荐

最新文章

热门文章