canvas学习 -- 第一天

一、建立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上下文上，实验性特性。