Question

我是HTML5的新手并开始学习画布。

目前，我正在使用画布来旋转一些对象。我创建的矩形确实会移动，但是，我遇到了问题，在对象移动后，从我捕获的图像中可以看到一些阴影。

我只想拥有矩形，而不包括蓝色背景笨拙的东西。我尝试使用不同的浏览器来查看这个HTML5文档，但同样的问题出来了。这是我的电脑的问题，还是代码的问题？如果是这样，我该如何解决？

我还在jsFiddle：http://jsfiddle.net/hphchan/ogoj9odf/1/

中附加了旋转矩形示例的源代码

这是我的密码：

在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); 
}

在HTML中

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

感谢您的回答。

Answer 1

此问题可能来自抗锯齿。

您可以在绘制旋转的形状后直接清除它来看到它：

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>

因此，解决此方法的一个解决方案是清除比您刚刚绘制的矩形略大的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 个答案: