基于sketch.js 写得一个刮刮卡demo，参考了http://jsdo.it/BoBos/ePaN 这个demo
Created
July 1, 2014 14:19
-
-
Save iflamed/6eb0370cf7648667ada8 to your computer and use it in GitHub Desktop.
A Pen by 刘兵.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns="http://www.w3.org/1999/xhtml"><head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=480px,target-densitydpi=device-dpi,user-scalable=no"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | |
| <meta name="format-detection" content="telephone=no"> | |
| <title>中苹果</title> | |
| </head> | |
| <body> | |
| <div id="card"> | |
| <div id="jiang"></div> | |
| <div id="gua"></div> | |
| </div> | |
| <div id="content">中苹果</div> | |
| <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| //这一段是一组随机代码，随机派奖，此段可以删除 | |
| (function(){ | |
| var random = Math.round(Math.random() * 9); | |
| if (random < 1) { | |
| document.getElementById("jiang").innerHTML = "Ipad-Mini"; | |
| } | |
| else if (random < 3) { | |
| document.getElementById("jiang").innerHTML = "Iphone5s"; | |
| } | |
| else if (random < 5) { | |
| document.getElementById("jiang").innerHTML = "Iphone5c"; | |
| }else { | |
| document.getElementById("jiang").innerHTML = "Iphone4S没有"; | |
| } | |
| })(); | |
| </script> | |
| </body></html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var COLOURS = [ 'rgba(255,255,255,1)', '#A7EBCA', '#FFFFFF', '#D8EBA7', '#868E80' ]; | |
| var radius = 0; | |
| var sketch = Sketch.create({ | |
| fullscreen:false, | |
| width:240, | |
| height:50, | |
| container: document.getElementById( 'gua' ), | |
| autoclear: false, | |
| percentSchedule:true,//set true will caculat the percentage each 200ms | |
| eraseFinish:true,//lock canvas after erase finish | |
| setup: function() { | |
| this.globalCompositeOperation="source-over"; | |
| this.rect(0,0,this.width,this.height); | |
| this.fillStyle= this.strokeStyle ="#777"; | |
| this.fill(); | |
| this.globalCompositeOperation="destination-out"; | |
| document.getElementById('jiang').style.display="block"; | |
| }, | |
| resize:function(){ | |
| this.globalCompositeOperation="source-over"; | |
| this.rect(0,0,this.width,this.height); | |
| this.fillStyle= this.strokeStyle ="#777"; | |
| this.fill(); | |
| this.eraseFinish=true; | |
| this.globalCompositeOperation="destination-out"; | |
| }, | |
| update: function() { | |
| radius = 2 + abs( sin( this.millis * 0.003 ) * 20 ); | |
| }, | |
| // Event handlers | |
| keydown: function() { | |
| if ( this.keys.C ) { | |
| this.clear(); | |
| $('canvas').trigger('percentReady',{'percent':100}); | |
| } | |
| }, | |
| // Mouse & touch events are merged, so handling touch events by default | |
| // and powering sketches using the touches array is recommended for easy | |
| // scalability. If you only need to handle the mouse / desktop browsers, | |
| // use the 0th touch element and you get wider device support for free. | |
| touchmove: function() { | |
| if(!this.eraseFinish){ | |
| return; | |
| } | |
| for ( var i = this.touches.length - 1, touch; i >= 0; i-- ) { | |
| touch = this.touches[i]; | |
| this.lineCap = 'round'; | |
| this.lineJoin = 'round'; | |
| this.fillStyle = this.strokeStyle = COLOURS[ i % COLOURS.length ]; | |
| this.lineWidth = radius; | |
| this.beginPath(); | |
| this.moveTo( touch.ox, touch.oy ); | |
| this.lineTo( touch.x, touch.y ); | |
| this.stroke(); | |
| } | |
| if(this.percentSchedule){ | |
| window.ctx = this; | |
| setTimeout(this.percentage,200); | |
| this.percentSchedule=false; | |
| } | |
| }, | |
| percentage:function(){ | |
| var hits = 0; | |
| var imageData = ctx.getImageData(0,0,ctx.width,ctx.height); | |
| for(var i=0, ii=imageData.data.length; i<ii; i=i+4) | |
| { | |
| if( | |
| imageData.data[i] == 0 && | |
| imageData.data[i+1] == 0 && | |
| imageData.data[i+2] == 0 && | |
| imageData.data[i+3] == 0 | |
| ) hits++; | |
| } | |
| var percent = hits / (imageData.data.length/4) * 100; | |
| ctx.percentSchedule=true; | |
| $('canvas').trigger('percentReady',{'percent':percent});//trigger a event after calulate the percentage | |
| return percent; | |
| }, | |
| banned:function(){ | |
| this.eraseFinish=false; | |
| } | |
| }); | |
| $('body').on('percentReady','canvas',function(e,data){ | |
| if(data.percent>70){ | |
| sketch.clear(); | |
| sketch.banned();//now not allow to erase canvas more | |
| console.log(data.percent); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "utf-8"; | |
| * { -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; outline:none; } | |
| html { -webkit-text-size-adjust:none; } | |
| body { margin:0; padding:0; } | |
| a { text-decoration: none; } | |
| ul,li { list-style:none; margin:0; padding:0; } | |
| img{ border:0; } | |
| #card { width:480px; height:312px; background:url(http://jsrun.it/assets/l/U/g/H/lUgHo.jpg) no-repeat; position:relative; } | |
| #jiang { width:240px; height:50px; background-color:#fff; top:173px; left:173px; position:absolute; z-index:5; font-size:24px; text-align:center; line-height:50px; display:none;} | |
| #gua { top:173px; left:173px; position:absolute; z-index:10;} | |
| #content { width:440px; padding:20px; font-size:24px; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment