画布中的圆形变形了。

Question

画布中的圆形变形了。

3

我试图画一个简单的圆圈，但是它变形了。并且颜色也变淡了。为什么会发生这种情况？

<html>
<body>
<script>
function makeit(){
var canvas=document.createElement('canvas');
var atts=document.createAttribute('style');


atts.value="width:400px;height:400px;border:1px solid black;";
canvas.setAttributeNode(atts);

document.body.appendChild(canvas);

var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="black";
ctx.arc(100,100,25,0,2*Math.PI);
ctx.stroke();
}
window.onload=makeit;
</script>
</body>
</html>

- AL-zami

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3299259 · Accepted Answer

这是因为您在样式对象中设置了宽度和高度。尝试使用canvas.width = canvas.height =来进行设置。

style.width style.height定义了在HTML DOM中canvas的外观。

canvas.width canvas.height定义了画布的宽度和高度...

例如，如果您使用400和400定义画布的宽度和高度，并且希望通过样式对象显示800像素的宽度和800像素的高度，它会变形，因为将每个维度乘以2会使其变大。

通常是1比1。