Javascript HTML5CanvasScratch插件在android上不起作用
我正试图制作一个刮刮彩票游戏,但它似乎在安卓系统中被破解了。我知道它在IE中不起作用,我只关心android。我正在使用KinecticJS库Javascript HTML5CanvasScratch插件在android上不起作用,javascript,html,html5-canvas,kineticjs,Javascript,Html,Html5 Canvas,Kineticjs,我正试图制作一个刮刮彩票游戏,但它似乎在安卓系统中被破解了。我知道它在IE中不起作用,我只关心android。我正在使用KinecticJS库 (function () { var options = { scratchWidth: 200, // change scrathcher width here scratchHeight: 200, // change scrathcher height here scratcherSize:
(function () {
var options = {
scratchWidth: 200, // change scrathcher width here
scratchHeight: 200, // change scrathcher height here
scratcherSize:20, // change radius of scratcher
imageHeight: 118,
imageWidth: 106,
imageUrl: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg',
};
function makeShapeComposite(shape, operation) {
shape.attrs._sceneFunc = shape.attrs.sceneFunc;
shape.attrs.sceneFunc = function (context) {
context.save();
context._context.globalCompositeOperation = operation;
this.attrs._sceneFunc.call(this, context);
context.restore();
};
return shape;
};
var stage = new Kinetic.Stage({
container: 'scratcher',
width: options['scratchWidth'],
height: options['scratchHeight']
});
var imageLayer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function () {
var image = new Kinetic.Image({
x: 0, //change width of image here
y: 0, //change width of image here
image: imageObj,
width: options['imageWidth'],
height: options['imageHeight']
});
// add the shape to the layer
imageLayer.add(image);
// add the layer to the stage
stage.add(imageLayer);
imageLayer.setZIndex(0);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
var scratchLayer = new Kinetic.Layer();
var fill = new Kinetic.Rect({
x: 0,
y: 0,
width: 200,
height: 200,
fill: 'grey',
});
scratchLayer.add(fill);
stage.add(scratchLayer);
var clicking = false;
$('.kineticjs-content').on('mousedown touchstart',function(e){
e.preventDefault();
clicking = true;
});
$('.kineticjs-content').on('mouseup touchend',function(e){
e.preventDefault();
clicking = false;
});
$('.kineticjs-content').on('mousemove touchmove', function () {
if(clicking == false) return;
var mousePos = stage.getPointerPosition();
var circle = new Kinetic.Circle({
x: mousePos.x,
y: mousePos.y,
radius: options['scratcherSize'],
fill: 'red'
});
var pol = makeShapeComposite(circle, 'destination-out')
scratchLayer.add(circle);
scratchLayer.draw();
});
})();
您在androidBoth chrome和内置浏览器中使用了什么浏览器。安卓4.1.1。可能有点慢。我认为在头部的视口选项需要。