试图画一个简单的圆。但是它变得变形了。颜色也逐渐淡了。为什么会这样？
<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>
最佳答案
这是因为您在样式对象上设置了宽度和高度。
尝试canvas.width = canvas.height =
style.width style.height定义html dom中画布的外观。
canvas.width canvas.height定义画布的宽度和高度...
例如，如果您定义的画布宽度和高度分别为400和400。并且您希望画布在样式对象上以800px的宽度和800px的高度显示。由于将尺寸调整为较大，每个尺寸乘以2，因此会失真。
通常是1比1
关于javascript - 一个圆圈在 Canvas 中变形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23477980/