html canvas标签宽度和css宽度的区别_框架

如果此时我在canvas上画一个圆，但是在浏览器上看到的效果却是个扁平的圆。为什么？

canvas就像一张，如上面的例子就是一张300300的，当你通过css设置宽度和高度时，就相当于你对一个进行了拉伸处理，如果设置的宽高比例和canvas本来的宽高比例不同的话，就会出现变形的情况。

因为通过css设置宽高只相当于对canvas进行缩放 *** 作；所以我们可以通过js来修改canvas标签上的属性来达到我们想要的效果。

举个栗子：

刷新浏览器，正圆又回来了，大功告成~

没有大小限制

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

小案例：canvas绘制渐变

<!DOCTYPE HTML>

<html>

<body>

Your browser does not support the canvas element

</canvas>

var c=documentgetElementById("myCanvas");

var cxt=cgetContext("2d");

var grd=cxtcreateLinearGradient(0,0,175,50);

grdaddColorStop(0,"#FF0000");

grdaddColorStop(1,"#00FF00");

cxtfillStyle=grd;

cxtfillRect(0,0,175,50);

</script>

</body>

</html>

以上就是关于html canvas标签宽度和css宽度的区别全部的内容，包括:html canvas标签宽度和css宽度的区别、html5canvas的宽高有大小限制吗、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

html canvas标签宽度和css宽度的区别