支持ie9及以上浏览器
刮刮乐效果制作
盖伦.jpg
1808957-8204a98228d2da66.gif
1.html
<body>
<a href="">[站外图片上传中……(1)]</a>
<canvas id="gailun" height="600" width="900"></canvas>
<script src="js/index.js"></script>
</body>
canvas 的宽高必须在标签上设置，在css上定义不起作用。
2.css
img {
width: 900px;
height: 600px;
left: 200px;
position: absolute;
z-index: -1;
}
canvas {
margin-left: 200px;
}
3.js
(function(win, $) {
var cas = document.getElementById('gailun'),
cot = cas.getContext('2d');
cot.beginPath();
cot.fillStyle = 'grey';
cot.fillRect(0, 0, 900, 600);
cas.onmousedown = function() {
cas.onmousemove = function(e) {
var x = e.clientX,
y = e.clientY;
//destination-out 显示原来的不在后来区域的部分
cot.globalCompositeOperation = "destination-out";
cot.beginPath();
cot.arc(x-200,y,28,0,2*Math.PI);
cot.fill();
}
}
cas.onmouseup = function() {
cas.onmousemove = function(e) {
}
}
}(this, jQuery));
网友评论