一、建立canvas画布
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000; "></canvas> 【Ps:width,height是画布的宽高，样式是为了显示这个画布，绘制是在js中】
二、运行在script中
A: 获取当前canvas的id元素。如：var myCanvas = document.getElemetById("myCanvas")；
B: 获取这个对象上的方法，获得 2d 上下文对象。var ctx=myCanvas.getContext(“2d”) ；
contextType参数有以下四种：
“2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。
“webgl”(或“experimental-webgl”),创建一个WebGLRenderingContext对象作为3D渲染的上下文，只在实现了WebGL 2的浏览器上可用，实验性特性。
“webgl2”,创建一个WebGL2RenderingContext对象作为3D渲染的上下文，只在实现了WebGL 3的浏览器上可用。
“bitmaprenderer”，创建一个ImageBitmapRenderingContext，用于将位图渲染到canvas上下文上，实验性特性。