试图画一个简单的圆圈。但它变得扭曲。并且颜色也褪色。为什么会发生这种情况？
<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>
小智 5
这是因为您设置了样式对象的宽度和高度。尝试canvas.width=canvas.height=
style.width style.height 定义了 html dom 中画布的外观。
canvas.width canvas.height 定义画布的宽度和高度...
例如，如果您将画布宽度和高度定义为 400 和 400，并且您希望画布在样式对象上显示为 800 像素宽度和 800 像素高度。由于将大小调整为更大的每个维度乘以 2，因此它会变形。
通常是 1 比 1