canvas绘制中的API

canvas绘制Z

先贴代码吧：

/**
 * Created by Administrator on 2016/1/26.
 */
var i;
function draw (id){
    var canvas = document.getElementById(id);
    context = canvas.getContext('2d');
    setInterval(painting,10);
    i=0;
}
function painting(){
    context.fillStyle = "red" ;
    context.fillRect(i+10,0,10,10);
    context.fillRect(400-i,i,10,10);
    context.fillRect(i+10,390,10,10);
    i++;
}

这里值得一提的是setInterval方法。

格式：

　　setInterval(code,millisec[,"lang"])
　　code:调用的代码段，即调用的函数。
　　millisec:周期性执行或调用 code 之间的时间间隔，以毫秒计。
　　作用：用于绘图。

canvas屏幕框
代码：

/**
 * Created by Administrator on 2016/1/26.
 */
var i;
function draw (id){
    var canvas = document.getElementById(id);
    context = canvas.getContext('2d');
    setInterval(painting,10);
    i=0;
}
function painting(){
    context.fillStyle = "red";
    context.fillRect(0,0,200,200);
    context.fillStyle = "white";
    context.clearRect(20,20,50,50);
}

这里有clearRect方法。

格式：

　　clearRect(x,y,width,heigth)

　　属性不解释。

　　作用：用于擦除。