canvas怎样设置宽高？有几种方式？
canvas 画布默认宽300px高150px 属性设置宽高
<canvas id="canvas"width="400"height="400">
js设置宽高
let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d')
let cx = canvas.width = 400
let cy = canvas.height = 400
不要在css中设置宽高
css中样式的宽高并不是改变canvas画布的宽高，而是在它原始基础的大小上等比例缩放了，canvas 画布默认宽300高150 ,假如在设置中写width:600,高height:300,就相当于画布宽高都增加了一倍，相应的里面的元素大小也会成倍增加。所以样式中设置canvas宽高会等比例缩放，而内联设置的宽高是画布的实际大小
canvas在低浏览器中的兼容怎么处理？
<canvas id="c1" width="400" height="400">
<span>不支持canvas浏览器</span>
</canvas>
在canvas内部嵌套一个标签，当遇到不支持canvas标签时会直接读取span
canvas绘制的元素边框默(left,top为整数时)认都是1像素，为什么放在画布中会变成2像素？
let oC = document.getElementById('c1')
let oGC = oC.getContext('2d')
oGC.strokeRect(50,50,100,100)
在canvas画布中绘图和在页面中是一样的。因为每一个点都是像素，当它的lef为50的时候，因为它是1像素的边框，那他要围绕着50像素这条线往左分0.5像素，往右边分0.5像素，是从中间往两边延伸，这时左右两边都是一个像素里有半个像素。这样页面显示就有问题了。因为像素是一个格一个格的显示，而不能显示半个格。所以这种情况下，计算机就会自动补充半个像素，所以看上去就像是两个像素。 处理方法
oGC.strokeRect(50.5,50.5,100,100);
//或者
oGC.strokeRect(49.5, 49.5, 100, 100);
left 和top都平移0.5像素，这样从中间向两边延伸的时候，都是0.5，正好和像素点对齐，恰好是1像素。
