Question

我遇到了在画布上绘制图像的问题（并希望得到一些帮助）：）

我正在构建一个应用程序，让用户选择一个图像，然后在上面绘图。我正在使用画布来渲染它。问题在于：当我选择了一个图像时，我在画布上绘制了图像（在屏幕中央），但正如你在屏幕截图中看到的那样，它会绘制两次 - 其中一个是画布的外部（窗口）位置0,0）。

这是android webview中的一个小故障吗？

（我正在使用Cordova / Phonegap 2.7）

HTML：

<div class="box_canvas box_canvas_doodle shadowbox50">
<canvas id="canvas_doodle" />
</div>

JAVASCRIPT（摘录）：

$(".box_canvas_doodle").css( "left", Math.floor(($(window).width()-image_resized_wid)/2) );
$(".box_canvas_doodle").css( "top", Math.floor(($(window).height()-48-image_resized_hei)/2) );

// Clear
doo.ctx.doodle.clearRect(0, 0, doo.canvas.doodle.width, doo.canvas.doodle.height);

// Draw image
doo.ctx.doodle.drawImage(doo.imageElem, 0, 0, doo.imageElem.width, doo.imageElem.height, 0, 0, doo.canvas.doodle.width, doo.canvas.doodle.height);

Screenshot http://storage.rejh.nl/_stored/Screenshot_2013-07-25-08-36-53.png

Answer 1

好的我觉得我发现了问题。在许多情况下，“位置：相对;”有一些奇怪的后果。我把它设置为“位置：绝对;” （对于包装画布的div'box_canvas_doodle'）现在它正确渲染画布。

... html为什么你这样＆amp; ^＆amp;＃^（）__ * @

Answer 2

好的，变通方法也在一段时间后破裂了（不知道为什么）。我现在重建它，使画布全屏，只是将图像绘制在中心（而不是移动画布）和顶部的标题。 Shees。

HTML5 Canvas渲染故障

2 个答案: