1

我正在尝试使用“touchstart”移动事件和 HTML5 画布使用 jquery mobile 绘制一些东西！

我使用这个 html 代码：

<canvas id="canvasTouch">Canvas is not supported</canvas>

和JS代码：

canvas = document.getElementById('canvasTouch');        
context = canvas.getContext('2d');

$(document).bind("touchstart",function(event) {    
    context.beginPath();
    context.arc(event.originalEvent.targetTouches[0].pageX,event.originalEvent.targetTouches[0].pageY, 10, 0, Math.PI*2); 
    context.fill();
    context.closePath();
}

但是我的圆圈看起来像省略号并且非常模糊！

我用经典的 html 页面尝试了这段代码，它在我的设备上运行良好......

你有什么主意吗 ？

谢谢

4

1 回答 1

2

您是否将上下文的宽度和高度设置为正确的值（通常是画布元素的尺寸）？

元素和上下文之间的大小不同会破坏您可能期望的 1:1 像素映射，从而导致失真和模糊。如果您正在使用属性或脚本更改元素大小，这尤其重要（我不记得了，我不记得它何时自动更改上下文大小）。

于 2013-01-09T16:57:01.003 回答