Question

试图绘制一个简单的圆圈。但是它变得扭曲了。颜色也会变淡。为什么会发生这种情况？

<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>

Answer 1

这是因为您在样式对象上设置了宽度和高度。尝试canvas.width = canvas.height =

style.width style.height在html dom中定义画布的外观。

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

例如，如果您使用400和400定义画布宽度和高度，并且您希望画布在样式对象上显示800px宽度和800 px高度。由于调整大小使每个维度乘以2，它会变形。

通常是1比1

圆圈在画布中变形

1 个答案: