关于canvas宽度和高度问题

视频里既然给canvas设置了宽和高，即
canvas.width = width;
canvas.height = height;
是不是没必要再给canvas的style属性设置宽高了，如下两行代码是不是可以省略：
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
感觉有点多余？
如果需要设置，请老师帮忙讲解一下为什么，有什么好处？

人生的起源 2020-02-17

源自：项目：Canvas 实现手势解锁 2-2 画圆函数介绍

收起

2回答

好帮手慕码回答被采纳获得+3积分 2020-02-17 13:55:38

同学你好，这两句的效果在于：

删掉也是可以的，并不妨碍效果实现的。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕码 2020-02-17 11:11:51

同学你好，视频后面有讲到的，如果还是不明白可以这样理解：

Canvas 是一个画板和一张画纸，画板相当于一个容器，画图是在画纸上进行的。

画板和画纸的默认宽高是300*150，当画纸与画板宽高相等时，图像不会被拉伸，当画纸与画板宽高不一样时，图像就会被拉伸（变形）。

style样式里设定的是仅画板的宽高300*300，画纸的宽高还是为默认值300*150，画纸不会让画板就这么空出一片，于是画纸连同图像就要一起拉伸到跟画板大小一样。在此例子当中，画纸宽与画板宽都为300，而高为画板的一半，因此只需将高拉伸一倍即可，所以图像也一起被拉伸变瘦，X方向不变，Y方向增至一倍，所以就得到了变形之后的椭圆。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~~

收起回答

提问者人生的起源 #1

你说的拉伸这个道理我是知道的，我想问的是，好像没有必要再设置一个style是不是？只设置canvas的width和height就已经达到效果了呀

2020-02-17 11:23:48
提问者人生的起源 #2

我问的问题不是为什么会变形，而是js代码里多写了两行 canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; 我觉得这两行好像没必要写

2020-02-17 11:26:31