我的Canvas当前可以通过鼠标事件正确绘制,但是我想让它运行于触摸事件,有没有办法在不中断代码的情况下完成它?
我已经尝试了一些触摸事件,但是真的没有运气,所以欢迎任何帮助。
$( document ).ready(function() {
var container = document.getElementById('canvas');
init(container,200,'#ddd');
function init(container,width,height,fillColor) {
var canvas = createCanvas(container,height);
var ctx = canvas.getcontext('2d');
var mouse = {x: 0,y: 0};
var last_mouse = {x: 0,y: 0};
canvas.addEventListener('mousemove',function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
if (e.offsetX) {
mouse.x = e.offsetX;
mouse.y = e.offsetY;
}
});
canvas.onmousemove = function(e) {
/* If nobody is drawing */
if (!canvas.isDrawing) {
return;
}
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
};
canvas.addEventListener('mousedown',function(e) {
canvas.addEventListener('mousemove',onPaint,false);
},false);
canvas.addEventListener('mouseup',function() {
canvas.removeEventListener('mousemove',false);
});
canvas.addEventListener('touchstart',function(e) {
canvas.addEventListener('touchmove',false);
var onPaint = function() {
ctx.beginPath();
ctx.moveTo(last_mouse.x,last_mouse.y);
ctx.lineTo(mouse.x,mouse.y);
ctx.closePath();
ctx.stroke();
ctx.lineWidth = 15 ;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
};
}