HTML5 canvas方法总结

什么是canvas

canvas是HTML中新增加的标签，可以使用它在页面绘制图形等，值得注意的是canvas本身只相当于一张画布，我们只是在它上面绘画。

canvas的高宽

canvas并不需要我们去设置它的高宽，它默认的宽带和高度是300px150px
如果想要修改高宽，值得注意的是不能直接用css的方式去修改它的高宽。这是因为canvas相当于一张图片，如果通过css的方式设置它的高宽，会导致canvas默认的300150高宽被强行拉伸。
所以一般这样设置canvas的高宽

let myCanvas = document.getElementById('canvas1');
myCanvas.width = "500";
myCanvas.height = "500";//注意不加px

获取canvas环境

let ctx = myCanvas.getContext(“2d”);//
这样我们就真正的获取了一个画布，可以开始向画布上添加元素了。非常不幸的是canvas目前只能绘制2d图形

canvas的坐标轴

坐标原点在屏幕左上角，横坐标向右为正，纵坐标向下为正

canvas2d对象的绘图方法和属性

可以参考https://www.runoob.com/tags/ref-canvas.html

canvas绘制图形有两种方法
1.ctx.fill（）//填充
2.ctx.stroke（）//绘制边框

设置样式同样有两种
1.ctx.fillStyle=’’//设置填充样式
2.ctx.strokeStyle=’’//设置边框样式

同时可以设置图形边框的宽度
ctx.lineWidth = ‘’

绘制矩形
ctx.fillRect(x,y,width,height)
绘制效果：

ctx.strokeRect(x,y,width,height)