Canvas设置样式无效导致圆变成椭圆的问题研究剖析

Canvas设置样式无效导致圆变成椭圆的问题研究剖析，如下面代码段。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置的是600*600 */canvas{width: 600px;height: 600px;}</style>
</head>
<body>    <canvas id="canvas"  style="background: red;"></canvas><script>//VSCode:恶心;插件不好搞;/** @type {HTMLCanvasElement}*/let canvas=document.getElementById('canvas');let ctx=canvas.getContext('2d');//画圆操作//利用2d对象进行绘制圆操作//arc(x,y,半径，开始位置,结束角度,选转方向)false:表示顺指针;true:逆时针console.log(canvas.width+","+canvas.height);ctx.arc(80,80,50,0,2*Math.PI,true); //绘制圆方法;ctx.fillStyle='blue';ctx.fill();</script>
</body>
</html>

使用浏览器输出测试效果如下所示。
ctx.arc(80,80,50,0,2Math.PI,true); //绘制圆方法;改行代码我们设置的是绘制圆，但是显示的椭圆怎么回事嗯？
这时候使用下面的语句进行测试一下，查看canvas的宽、高。
我们发现canvas的宽和高是300 150.如下所示。
为什么回事这样呢？我们现在把canvas的样式设置给注释掉。再次运行代码，查看浏览器效果。发现即使我们没有给canvas设置宽和高，也会自动有宽高位300 150的设置。
这时候，刚才绘制的椭圆思路已经很清晰了，原因在于，canvas绘制之后，首先相当于作为了一张300150的图片进行绘制，即上图。这时候把上图截图后放到画图。
因为默认的canvas已经绘制完圆形图片，现在被作为了图片再进行样式设置。代码“canvas{width: 600px;height: 600px;} ”相当于对这个图片进行拉伸设置，那么我们对这个图片进行拉伸，拉伸后效果就是图1的效果。
这是canvas在使用过程中很容易掉的一个坑，所以，建议针对canvas的设置，直接在canvas的属性里面设置，不要在样式里面设置。

Canvas设置样式无效导致圆变成椭圆的问题研究剖析相关推荐

html th样式设置,为什么tabletrth等设置样式无效?
要坚信在一个html文件中 , 可以设置它所包含的 "子文件"中的元素的样式, 这是可以的,是有效的, 而且也只能这样设置! 比如在a.html中, 可能设置了layout, ...
vue使用element-ui的el-date-picker设置样式无效
一般在vue中设置css样式,由于代码为<style lang="scss" scoped>,设置了scoped,所以一般改变element-ui中的样式都使用::v- ...
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
css设置中文字体后样式无效解决方法
CSS编码设置问题: @charset "utf-8" IE6中问题:去掉CSS字体设置样式中的空格和双引号. 只要把 font-family: "黑体"; 改 ...
canvas设置颜色及线条样式
canvas设置颜色及线条样式 1. canvas设置颜色 2. canvas设置线条样式 1. canvas设置颜色 fillStyle = color; //设置图形的填充颜色 strokeSty ...
RTF富文本中字体样式设置为-apple-system-font导致IOS客户端显示字体异常
发现该段内容的font-famliy中有一些其他字体,如-apple-system-font -apple-system.BlinkMacSystemFont 是什么东东?根据 Webkit 博客,- ...
python画椭圆-python绘制圆和椭圆
源自:https://blog.csdn.net/petermsh/article/details/78458585 1. 调用包函数绘制圆形Circle和椭圆Ellipse from matplot ...
QToolButton设置背景无效的思考
.QToolButton{ border:0px; } .QToolButton:hover { background-color: rgb(221,221,221); } 问题:如图qss显然语法是 ...
canvas示例样式_使用js canvas和atari vcs trivia制作基本html游戏的快速示例
canvas示例样式 If you are anything like I was, you came into the programming world with some kind of fan ...

Canvas设置样式无效导致圆变成椭圆的问题研究剖析

Canvas设置样式无效导致圆变成椭圆的问题研究剖析相关推荐

最新文章

热门文章