2020-06-22-Canvas笔记01-Canvas元素

canvas元素的大小与绘图表面的大小

• Canvas元素默认大小
  浏览器所创建的canvas元素，默认尺寸是 300px * 150px
• 如何设置Canvas元素的大小
  可以在canvas 元素节点属性中设置width 和 height

不建议使用CSS来设置Canvas的宽高
canvas元素实际上有两套尺寸，一个是元素本身的大小，还有一个是元素绘图表面(drawing surface)的大小。
当设置元素的width和height属性时，相当于同时设置了元素本身的大小和元素绘图表面的大小。
而使用CSS设置canvas的大小时，只是改变了元素本身的大小，绘图表面的大小还是默认的300*150px。
当canvas元素大小和绘图表面的大小不一致时，浏览器就会对绘图表面进行缩放，使其符合元素的大小。

canvas元素相当于相框，绘图表面大小相当于照片的大小。

Canvas元素API

• width：canvas元素绘图表面的宽度。非负整数，默认值300。
• height: canvas元素绘图表面的高度。非负整数，默认值150。
• getContext() 返回与该canvas元素相关的绘图环境变量。每个canvas元素都有一个环境变量，而且每个环境变量都与一个canvas元素相关联。
• toDataURL（type, quality)
• toBlob(callback, type, args...)