我无法在HTML Canvas上的特定点(250,250)处旋转线条,我想知道人们是如何做到的。我查看了其他答案并尝试了它们,但它们没有解决我的问题。
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function circles(){
context.beginPath();
context.arc(250,250,6.35,0,2*Math.PI);
context.stroke();
}
function lines(){
var deg = 45;
context.beginPath();
context.moveTo(250,250);
context.lineTo(250,0);
context.stroke();
context.save();
context.rotate(deg * Math.PI / 180);
context.translate(20,-25);
// This is the line I want to rotate
context.beginPath();
context.moveTo(250,250);
context.lineTo(250,0);
context.stroke();
//
context.restore();
context.beginPath();
context.moveTo(0,250);
context.lineTo(500,250);
context.stroke();
}
circles();
lines();
答案 0 :(得分:1)
上面的代码几乎已经存在。关键是在调用translate
之前,您需要rotate
上下文直到要旋转的点。您还需要translate
最后返回上下文。
带有以下注释的示例:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function circles(){
context.beginPath();
context.arc(250,250,225.5,0,2*Math.PI);
context.stroke();
context.beginPath();
context.arc(250,250,170,0,2*Math.PI);
context.stroke();
context.beginPath();
context.arc(250,250,162,0,2*Math.PI);
context.stroke();
context.beginPath();
context.arc(250,250,107,0,2*Math.PI);
context.stroke();
context.beginPath();
context.arc(250,250,99,0,2*Math.PI);
context.stroke();
context.beginPath();
context.arc(250,250,16,0,2*Math.PI);
context.stroke();
context.beginPath();
context.arc(250,250,6.35,0,2*Math.PI);
context.stroke();
}
function lines(){
var deg = 45;
context.beginPath();
context.moveTo(250,250);
context.lineTo(250,0);
context.stroke();
context.save();
// Translate the context to the point we want to rotate around
context.translate(250, 250);
// Perform the rotation
context.rotate(deg * Math.PI / 180);
// Draw the line
context.beginPath();
context.moveTo(0,0);
context.lineTo(-250,0);
context.stroke();
// Translate the context back to it's original position
context.translate(-250, -250);
context.restore();
context.beginPath();
context.moveTo(0,250);
context.lineTo(500,250);
context.stroke();
}
//Reference Lines
function refLines(){
context.beginPath();
context.moveTo(0,250);
context.lineTo(500,250);
context.stroke();
context.beginPath();
context.moveTo(250,0);
context.lineTo(250,500);
context.stroke();
context.beginPath();
context.moveTo(0,0);
context.lineTo(500,500);
context.stroke();
context.beginPath();
context.moveTo(0,500);
context.lineTo(500,0);
context.stroke();
}
circles();
lines();
section{
text-align: center;
margin: auto;
}
canvas{
border: 1px solid black;
}
<canvas id="canvas" width="500" height="500"></canvas>