为什么要整出这么一个对象？
如何在网页上画画？比如说画个矩形，这个用div的边框也许可以模拟。那么画个渐变的矩形呢？h5之前都是不好做的。
因此h5就发明了这个getContext("2d") 对象，用这个来进行简单作画。
画个矩形
<canvas id="mycanvas" width=300px height=200px></canvas>
<script>
var x=document.getElementById("mycanvas")
var ctx=x.getContext("2d") //create 2d object
ctx.rect(20,20,100,100);
ctx.stroke();//stroke means start to draw
</script>
结果
image.png
很简单，大致就是分为
首先创建画布，之后创建那个内置的2d对象，之后用rect方法画矩形。
HTML canvas rect() 方法 | 菜鸟教程
来个高级的，画个带渐变的矩形
<canvas id="mycanvas" width=300px height=200px></canvas>
<script>
var x=document.getElementById("mycanvas")
var ctx=x.getContext("2d") //create 2d object
var grd=ctx.createLinearGradient(20,20,150,150);//create grd object
grd.addColorStop(0,"yellow");//the start grd color;
grd.addColorStop(1,"red");//the end grd color; 1 means end
ctx.fillStyle=grd;//
ctx.fillRect(20,20,100,100);//draw a rect which is filled.
ctx.stroke();
</script>
结果如图
image.png
基本思路是
创建画布
创建2d对象
创建渐变对象
然后绘制图形，注意这次就不要rect方法，用fillrect方法，表示绘制一个被填充的矩形。
至于每个参数代表的意思
参考
HTML 画布 | 菜鸟教程
