標籤：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>
js產生驗證碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
