标签：des android style blog http ar io color os
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1.0" /> <title>canvas</title> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js" ></script> </head> <body> <canvas class="canvas"></canvas> <br/> <span id="test" data-rel="true"></span> </body> </html>
javascript
<script type="text/javascript">
//随机生成数
function getRandomStr(len)
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < len; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
//瓜瓜图层
(function(bodyStyle) {
bodyStyle.mozUserSelect = ‘none‘;
bodyStyle.webkitUserSelect = ‘none‘;
var $canvas = $(".canvas");
var moveTime, canvasTop = $canvas.offset().top;
$canvas.attr("data-flag", "true");
var u = navigator.userAgent, mobile = ‘‘;
if (u.indexOf(‘Windows‘) > -1)
mobile = ‘PC‘;
if (u.indexOf(‘iPhone‘) > -1)
mobile = ‘iphone‘;
if (u.indexOf(‘534‘) > -1 && u.indexOf(‘Linux‘) > -1)
mobile = ‘Android_pa‘;
var img = new Image();
var canvas = document.querySelector(‘canvas‘);
canvas.style.backgroundColor = ‘transparent‘;
if (mobile != "iphone" && mobile != "PC" && mobile == "Android_pa") {
canvas.style.position = ‘absolute‘;
}
img.addEventListener(‘load‘, function(e) {
var ctx;
var w = 270, h = 140;
var mousedown = false;
//渲染画布
function layer(ctx) {
//灰色区域
ctx.fillStyle = ‘#ccc‘;
ctx.fillRect(0, 0, w, h);
//区域上的字
ctx.font = "Bold 50px Arial red";
ctx.textAlign = "left";
ctx.fillStyle = "#aaa";
ctx.fillText("刮奖区", 50, 80);
}
function eventDown(e) {
e.preventDefault();
if (mobile != "iphone" && mobile != "PC"
&& mobile == "Android_pa") {
clearInterval(moveTime);
moveTime = setInterval(function() {
if ($canvas.attr("data-flag") == "true") {
canvasTop--;
$canvas.attr("data-flag", "false");
} else {
canvasTop++;
$canvas.attr("data-flag", "true");
}
$canvas.css("top", canvasTop);
}, 10);
}
mousedown = true;
}
function eventUp(e)
{
e.preventDefault();
clearInterval(moveTime);
mousedown = false;
var data = ctx.getImageData(0, 0, w, h).data;
for (var i = 0, j = 0; i < data.length; i += 4) {
if (data[i] && data[i + 1] && data[i + 2] && data[i + 3]) {
j++;
}
}
if ((j <= w * h * 0.5) && $("#test").attr("data-rel"))
{
//剩余10%面积提示信息
$("#test").html("恭喜您，中奖啦！");
$("#test").attr("data-rel", "false");
}
}
function eventMove(e) {
e.preventDefault();
if (mousedown) {
if (e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1];
}
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
with (ctx)
{
beginPath();
arc(x, y, 30, 0, Math.PI * 2,true);//设置涂抹大小
fill();
}
}
}
canvas.width = w;
canvas.height = h;
ctx = canvas.getContext(‘2d‘);
/*ctx.fillStyle = ‘yellow‘;
ctx.fillRect(0, 0, w, h); */
//绘制新图层，并设置为背景 s
ctx.save();
var fontSize = 36;
ctx.font = ‘ Bold ‘ + fontSize + ‘px Consolas‘;
ctxtextAlign = ‘center‘;
ctx.fillStyle = ‘#60f‘;
ctx.fillText(getRandomStr(10), this.width /8, this.height/2 + fontSize / 2);
ctx.restore();
//绘制新图层，并设置为背景 e
var data = canvas.toDataURL("image/png");
canvas.style.backgroundImage = ‘url(‘ + data + ‘)‘;
ctx.clearRect(0,0,this.width,this.height);//清除重影
layer(ctx);//执行函数
ctx.globalCompositeOperation = ‘destination-out‘;
canvas.addEventListener(‘touchstart‘, eventDown);
canvas.addEventListener(‘touchend‘, eventUp);
canvas.addEventListener(‘touchmove‘, eventMove);
canvas.addEventListener(‘mousedown‘, eventDown);
canvas.addEventListener(‘mouseup‘, eventUp);
canvas.addEventListener(‘mousemove‘, eventMove);
});
// 展示的图片
img.src="canvas-bg.png";
})(document.body.style);
</script>
标签：des android style blog http ar io color os
原文地址：http://my.oschina.net/u/2255569/blog/356651
