1
我们一直在玩弄canvas元素，但在移动Safari浏览器正遭遇低迷，而应用工程进展顺利桌面上勾画的Web应用程序。低迷的UI /在移动Safari浏览器（HTML5画布）
测试应用程序是非常原始。它只是让用户在桌面上使用鼠标或在智能手机上使用手指画线。
在移动Safari，所述线的绘制往往是非常干。一行的第一位将实时呈现，但其余部分将不会呈现，直到手指从屏幕上抬起为止。
任何想法，为什么？
下面的代码。
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css' />
<script src='http://code.jquery.com/jquery-1.6.4.min.js'></script>
<script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js'></script>
<style type='text/css'>
#canvas { border:1px solid red }
</style>
</head>
<body>
<div id='draw_page' data-role='page'>
<canvas id="canvas" width="500" height="350"></canvas>
</div>
<script type="text/javascript">
$('#draw_page').live('pageinit', function() {
prep_canvas();
});
</script>
</body>
</html>
的JavaScript：
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
var canvas;
var context;
function prep_canvas() {
canvas = $('#canvas')[0];
context = canvas.getContext("2d");
}
$('#canvas').live('vmousedown', function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').live('vmousemove', function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').live('vmouseup', function(e){
paint = false;
});
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "black";
context.lineJoin = "round";
context.lineWidth = 2;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
确保你没有在iPhone模拟器上测试。还运行在全屏模式下在画布或运行作为一个应用程序在移植用的PhoneGap会导致JavaScript在IOS 5至像的iOS 4.运行 – BumbleB2na 2012-03-01 23:10:32
此外，存在使用画布的多个层，以避免在每个帧重绘一切的方式，这在移动浏览器中非常麻烦。如果您有两层帆布层，那么您可以每隔一段时间将当前线条画到后面的画布上，然后只将线条的最新部分画到前面的画布上。 – BumbleB2na 2012-03-01 23:13:31
希望我可以进一步帮助。它看起来像这里的答案有一个现场演示，你可以尝试在你的手机上，我不认为这个人每次都重绘画布：http://stackoverflow.com/questions/7478501/how-to-get-smooth -mouse-events-for-a-canvas-drawing-style-app – BumbleB2na 2012-03-01 23:40:32