1.如何画长方形

<canvas id="canvas" width="500" height="400"></canvas>

    <script>

    //得到画布

    var canvas=document.getElementById("canvas");

    //得到画笔

    var ctx=canvas.getContext("2d");

    //定义填充色

    ctx.fillStyle="#fb5";

    //起点X,起点Y,width，height

    //填充一个矩形

    ctx.fillRect(0,0,200,200)

    </script>

2.如何画圆

    //得到画布

    var canvas=document.getElementById("canvas");

    //得到画笔

    var ctx=canvas.getContext("2d");

    //开始画图

    ctx.beginPath();

    //画出一个圆（圆心X,圆心y，起始角度，结束角度，是否顺时针）

    ctx.arc(100, 100, 100, 0,6.28, false)

      //定义填充色

    ctx.fillStyle="#fb5";

    //填充圆

    ctx.fill()

3.canvas画布上使用图片

<canvas id="canvas" width="500" height="400"></canvas>

    <script>

    //得到画布

    var canvas=document.getElementById("canvas");

    //得到画笔

    var ctx=canvas.getContext("2d");

    // 创建图片对象，Image是内置的构造函数，表示虚拟图片

    var img = new Image();

    // 图片路径

    img.src = "images/archer.png";

    // 当图片加载好之后，绘制

    img.onload = function(){

        // 绘制

          //url,画布X，画布Y，（后两个参数可选：图片区域width，图片区域height）

        ctx.drawImage(img , 100 , 0);

    }

注意，必须写onload事件！！

4.canvas使用精灵图

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var img=new Image();

img.src="nvhai.png";

img.onload=function(){

            // 第一个参数url

            //2-5个参数background-poaition

            //6-9个参数：画布X，画布Y，图片区域width，图片区域height

ctx.drawImage(img, 0,0,79,108,100,100,79,108)

}

API总结：自己总结咯！！！！！