各位大神,求教一个刮刮乐的效果的实现,在网上找了好多html5的,没注释感觉看不懂,所以求个实现方法,cocos2dx和cocos2d-js的都行。顺便共享个网上找的正常js的代码。
function init(container, width, height, fillColor, type) {
var canvas = createCanvas(container, width, height);
var ctx = canvas.context;
// define a custom fillCircle method
ctx.fillCircle = function(x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};
ctx.clearTo = function(fillColor) {
ctx.fillStyle = fillColor;
ctx.fillRect(0, 0, width, height);
};
ctx.clearTo(fillColor || "#ddd");
canvas.node.addEventListener(mobile == "PC" ? "mousedown" : "touchstart", function(e) {
canvas.isDrawing = true;
}, false);
canvas.node.addEventListener(mobile == "PC" ? "mouseup" : "touchend", function(e) {
canvas.isDrawing = false;
}, false);
canvas.node.addEventListener(mobile == "PC" ? "mousemove" : "touchmove", function(e) {
if (!canvas.isDrawing) {
return;
}
if (type == 'Android') {
var x = e.changedTouches.pageX - this.offsetLeft;
var y = e.changedTouches.pageY - this.offsetTop;
} else {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
}
var radius = 20;
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);
}, false);
}
var container = document.getElementById('canvas');
init(container, 320, 568, '#696868', mobile);