iflamed/index.html

## index.html
<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>

## script.js
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);
    }
});

## style.css
@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; }

## 刮刮乐.markdown

      
    Raw
  

              刮刮乐.markdown
            
          
    刮刮乐

基于sketch.js 写得一个刮刮卡demo，参考了http://jsdo.it/BoBos/ePaN 这个demo
A Pen by 刘兵 on CodePen.
License.
	<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>
	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);
	}
	});
	@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; }