您的位置：首页 > 其它

咱的刮刮乐

2015-11-28 12:01 302 查看

一步步写成

1、第一步

刮刮乐基本做法：用canvas画一条线，想办法让画的这条线透明，显示被遮住的内容。故第一步就是画这条线

<!doctype html>
<html>
<head>
<title>canvas paint</title>
<style>
.wrap{width:1200px;margin:60px auto;background:#386077;height:500px;padding-top:60px;}
.card{position:relative;margin:60px auto;width:400px;height:150px;}
.default{text-align:center;line-height:150px;color:#ff5400;font-family:Arial;font-size:24px;}
#twrap{width:100%;height:100%;}
canvas{position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<div id="twrap"></div>
<canvas width=400 height=150 id="canvas"></canvas>
</div>
</div>
<script>
var coverColor = '#bab4a8', w = 20, text = document.createElement('div');
text.className='default';
text.innerHTML='恭喜您，中了一百万大奖！';
var c = canvas.getContext('2d');
c.globalCompositeOperation = 'source-over';
c.fillStyle = coverColor;
c.fillRect(0,0,400,150);
c.font = '40px Arial';
c.fillStyle = '#666';
c.measureText('');
c.fillText('刮刮乐', 135, 90);
c.globalCompositeOperation = 'destination-out';
c.lineJoin = 'round';
c.lineCap = 'round';
c.lineWidth = w || 30;
c.strokeStyle = 'rgba(0,0,0,255)';
c.beginPath();
twrap.appendChild(text);

var orignx, origny, startx, starty, offsetx = canvas.getBoundingClientRect().left, offsety = canvas.getBoundingClientRect().top;
function mousedown(e){
orignx = e.clientX;
origny = e.clientY;
startx = orignx - offsetx;
starty = origny - offsety;
c.moveTo(startx, starty);
canvas.addEventListener('mousemove', mousemove, false);
canvas.addEventListener('mouseup', mouseup, false);
}
function mousemove(e){
var x = e.clientX - offsetx, y = e.clientY - offsety;
c.lineTo(x, y);
console.log(x + ", " + y);
c.stroke();
}
function mouseup(){
canvas.removeEventListener('mousemove', mousemove, false);
canvas.removeEventListener('mouseup', mouseup, false);
c.stroke();
}
canvas.addEventListener('mousedown', mousedown, false);

</script>
</body>
</html>

View Code
看我的100万大奖

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航