HTML5Canvas大小与坐标系的问题

canvas的绘制会是画布大小为准的。canvas的默认画布大小为300×150。

//方法一&＃xff1a;内联样式
//方法二&＃xff1a;内部样式

...
//方法三&＃xff1a;外部样式
style.css代码
canvas { width: 200px;height: 200px;
}
引入html中
...
...



可以看到宽度只有定义的一半。

其实 canvas 和 svg 很相似&＃xff0c;都有视口和画布这两个属性。

举个例子&＃xff0c;如果说房屋的窗子是视口&＃xff0c;通过它可以看到外面的自然世界&＃xff0c;那可以认为天地即为画布。

上图 canvas的默认画布大小为 2 : 1&＃xff0c;此时将视口设为 1 : 1&＃xff0c;正好宽度变为原先的一半。

上面的例子说明了&＃xff0c;对于 canvas&＃xff0c;设置其 style 样式&＃xff0c;只能改变它的视口大小&＃xff0c;却不会影响它的画布大小。

同样修改画布大小的方式也有两种

// 方法一&＃xff1a;
// 方法二&＃xff1a;