canvas一些基础api用法
- 首先需要创建一个 canvas
<canvas id="canvas"></canvas>
- 然后获取到这个元素，可以用 Document.getElementById('canvas')
const canvas = document.getElementById("canvas");
- 然后拿到他的上下文对象ctx (然后可以在上下文的位置绘制内容)
const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d");
getContext的方法签名中的contextType还有以下可选
"2d"：2D绘图上下文，用于绘制二维图形。
"webgl"：WebGL绘图上下文，用于绘制三维图形，利用OpenGL ES 2.0。
"webgl2"：WebGL2绘图上下文，是WebGL的升级版，利用OpenGL ES 3.0。
- fillStyle 属性让长方形变成绿色。fillRect() 方法将它的左上角放在 (10, 10)，把它的大小设置成宽 150 个单位高 100 个单位。
ctx.fillStyle = "green"; ctx.fillRect(10, 10, 150, 100);
- 这样就能看见一个绿色的长方形了
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
标签：10,canvas,const,入门,ctx,初步,getElementById,上下文 From： https://www.cnblogs.com/HugoKwong/p/18290221