HTML5 Canvas 渲染故障答案

【问题标题】：HTML5 Canvas render glitchHTML5 Canvas 渲染故障
【发布时间】：2013-07-27 23:09:51
【问题描述】：

我在画布上绘制图像时遇到问题（希望得到一些帮助）:)

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

这是 android webview 中的故障吗？？

（我使用的是 Cordova/Phonegap 2.7）

HTML：

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

JAVASCRIPT (sn-p)：

$(".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

【问题讨论】：

标签： html canvas cordova

【解决方案1】：

好的，我想我找到了问题所在。在许多情况下，“位置：相对；”有一些奇怪的后果。我已将其设置为“位置：绝对；” （对于包裹画布的 div 'box_canvas_doodle'），现在它可以正确渲染画布了。

...html 你怎么这么 &^^()__*@

【讨论】：

【解决方案2】：

好吧，解决方法也在一段时间后中断（不知道为什么）。我现在重建了它，使画布全屏显示，并在中心绘制图像（而不是移动画布）和顶部的标题。席子。

【讨论】：