clearRect之后的画布移动阴影

Question

I am new to HTML5 and start learning canvas. 我是HTML5的新手，并开始学习canvas。

Currently, I am using canvas to make some objects rotate. 目前，我正在使用画布使某些对象旋转。 The rectangle I created do move, however, I suffer from a problem, after the object move, some shadows remain as you can see from the image I captured. 我创建的矩形确实会移动，但是，我遇到了一个问题，对象移动后，仍然存在一些阴影，正如您从捕获的图像中看到的那样。

I just want to have the rectangle, and not including the blue background clumsy stuff. 我只想拥有矩形，而不包括蓝色背景笨拙的东西。 I try to use different browsers to view this HTML5 document, but same problem comes out. 我尝试使用不同的浏览器来查看此HTML5文档，但同样出现了问题。 Is this a problem of my computer, or is it a problem of the code? 这是我的计算机问题还是代码问题？ If so, how can I solve it? 如果可以，我该如何解决？

I have also attached my source code of rotating rectangle example in jsFiddle: http://jsfiddle.net/hphchan/ogoj9odf/1/ 我还在jsFiddle中附加了旋转矩形示例的源代码： http : //jsfiddle.net/hphchan/ogoj9odf/1/

Here is my key code: 这是我的关键代码：

In Javascript: 用Javascript：

function canvaScript() {
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    context.translate(200, 200); // fix the origin as center of the canvas
    rotating(context); 
}

function rotating(context) {
    context.clearRect(-50, -100, 100, 200); // why boundaries, shadows exist??
    context.rotate(Math.PI/180); 
    context.fillStyle = '#0000FF'; 
    context.fillRect(-50, -100, 100, 200); 

    setTimeout(function() {rotating(context)}, 100); 
}

In HTML 在HTML中

<body onload="canvaScript()">
    <canvas id="myCanvas" width="400" height="400"></canvas>  
</body>

Thanks for answering. 谢谢回答。

Answer 1

This problem probably comes from the anti-aliasing. 此问题可能来自抗锯齿。

You can see it by clearing directly after you drawn your rotated shape : 您可以通过在绘制旋转形状后直接清除来查看它：

 function canvaScript() { var context = canvas.getContext('2d'); context.translate(200, 200); // fix the origin as center of the canvas context.rotate(Math.PI/4); rotating(context); } function rotating(context) { context.fillStyle = '#0000FF'; context.fillRect(-50, -100, 100, 200); context.clearRect(-50, -100, 100, 200); } canvaScript();

 <canvas id="canvas" width="400" height="400"></canvas>

So one solution to workaround this is to clear a slightly larger clearRect than the rect you just drawn. 因此，一种解决方法是清除比刚绘制的矩形稍大的clearRect 。

 function canvaScript() { var context = canvas.getContext('2d'); context.translate(200, 200); // fix the origin as center of the canvas rotating(context); } function rotating(context) { // clear one extra pixel in all directions context.clearRect(-51, -101, 102, 202); context.rotate(Math.PI/180); context.fillStyle = '#0000FF'; context.fillRect(-50, -100, 100, 200); setTimeout(function() {rotating(context)}, 100); } canvaScript();

 <canvas id="canvas" width="400" height="400"></canvas>

clearRect之后的画布移动阴影

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-09-25 00:05:59

clearRect之后的画布移动阴影

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-09-25 00:05:59

解决方案1
2 已采纳 2015-09-25 00:05:59