为什么要整出这么一个对象？

如何在网页上画画？比如说画个矩形，这个用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 画布 | 菜鸟教程