3 回答

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊
將坐標(biāo)除以scale應(yīng)該可以解決問題:
var canvas = document.getElementById('mycanvas');
context = canvas.getContext("2d");
context.canvas.width = 400;
context.canvas.height = 200;
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
var scale = 2;
context.scale(scale, scale);
context.beginPath();
context.fillStyle = "#ff2626"; // Red color
context.arc(context.canvas.width /2/scale, context.canvas.height / 2/scale, 10, 0, Math.PI * 2); //center
context.fill();
context.closePath();
canvas {
border: solid 1px #ccc;
}
<HTML>
<body>
<canvas id="mycanvas"></canvas>
</body>
</HTML>
順便說(shuō)一句,context.canvas.width /(2*scale)
比 更干凈context.canvas.width /2/scale
,但我保持這樣只是為了顯示除以scale
.

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊
你必須考慮你的比例所以 ex (width/2)/scale
var canvas = document.getElementById('mycanvas');
context = canvas.getContext("2d");
context.canvas.width = 400;
context.canvas.height = 200;
context.clearRect(context.canvas.width, context.canvas.height, context.canvas.width, context.canvas.height); // Clears the canvas
var scale = 2;
context.scale(scale, scale);
context.beginPath();
context.fillStyle = "#ff2626"; // Red color
context.arc((context.canvas.width/2)/scale , (context.canvas.height/2)/scale, 10, 0, Math.PI * 2); //center
context.fill();
context.closePath();
canvas {
border: solid 1px #ccc;
}
<HTML>
<body>
<canvas id="mycanvas"></canvas>
</body>
</HTML>
添加回答
舉報(bào)