gpt4 book ai didi

javascript - 圆圈在 Canvas 中变形

转载 作者:行者123 更新时间:2023-11-29 18:15:53 24 4
gpt4 key购买 nike

试图画一个简单的圆。但它变得扭曲。颜色也变淡。为什么会这样?

<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 定义 Canvas 在 html dom 中的外观。

canvas.width canvas.height 定义 Canvas 的宽度和高度...

例如,如果您将 Canvas 的宽度和高度定义为 400 和 400,并且您希望 Canvas 在样式对象上显示 800 像素的宽度和 800 像素的高度。由于将每个维度乘以 2 调整到更大,它会变形。

通常是一对一

关于javascript - 圆圈在 Canvas 中变形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23477980/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com