我正在尝试在 Canvas 上设置旋转重复图标的动画,但它没有围绕图像中心旋转。我不知道该怎么做才能让它正常旋转。
setInterval(draw, 30);
var degrees = 0.0;
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 16, 16);
degrees += 0.10;
ctx.save();
ctx.translate(8,8);
ctx.rotate(degrees);
// Draw half open circle
ctx.beginPath();
ctx.lineWidth = 2;
ctx.arc(8, 8, 6, 0, 1.75 * Math.PI);
ctx.stroke();
// Draw arrowhead
ctx.lineWidth = 2;
ctx.moveTo(13, 1);
ctx.lineTo(9, 5);
ctx.lineTo(13, 5);
ctx.lineTo(13, 1);
ctx.stroke();
ctx.restore();
}
}
fiddle :http://jsfiddle.net/xTFkU/
最佳答案
您正在旋转 Canvas 并进行平移,但是绘图然后执行绘图功能,就好像 Canvas 未平移一样。
基本上,您需要做的是将 Canvas 平移到您正在绘制的图像的宽度和高度的一半。这将使 0,0 成为图像的中心。然后从所有坐标中减去偏移量。
我所做的是添加一个偏移值,即宽度和高度除以 2。然后,我按该偏移量平移 Canvas ,并从所有坐标中减去该偏移量。
<强> Working Demo
(function() {
setInterval(draw, 30);
var degrees = 0.0;
var offset = 8;
function draw() {
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 16, 16);
degrees += 0.10;
ctx.save();
ctx.translate(offset, offset);
ctx.rotate(degrees);
// Draw half open circle
ctx.beginPath();
ctx.lineWidth = 2;
ctx.arc(8-offset , 8-offset, 6, 0, 1.75 * Math.PI);
ctx.stroke();
// Draw arrowhead
ctx.lineWidth = 2;
ctx.moveTo(13-offset , 1-offset);
ctx.lineTo(9-offset , 5-offset);
ctx.lineTo(13-offset , 5-offset);
ctx.lineTo(13-offset , 1-offset);
ctx.stroke();
ctx.restore();
}
}
})();
关于javascript - 无法让 Canvas 元素正确旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12406523/