在写canvas的时候遇到了一个奇怪的问题,直接上代码
宽400高300的画布,在中间画一个红色的十字,看起来没什么问题,但结果却出了问题
查阅资料后发现canvas的绘制会是画布大小为准的,canvas的默认画布大小为300×150,在canvas中定义width、height跟在style中定义width和height是不同的,canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确,就被设置成默认值(width:300px,height:150px)。
也就是说,通过样式来设置canvas的时候canvas的大小会被拉伸。
正确的做法应该是:
,这样一来就没有问题了