Canvas base

window.onload= function () {

var oc= document.getElementById('c1');

var ogc= oc.getContext('2d');

ogc.save();

ogc.fillStyle= 'red';

ogc.strokeStyle= 'blue';

ogc.lineWidth= 10;

/*  bevel  创建斜角。            round  创建圆角。            miter  默认。创建尖角*/

ogc.lineJoin= 'round';

ogc.fillRect(50,50,100,100);

ogc.strokeRect(100.5,100.5,100,100);

ogc.beginPath();

ogc.lineWidth= 5;

ogc.moveTo(50,20);

ogc.lineTo(150,10);

ogc.lineTo(150,30);

ogc.closePath();

ogc.stroke();

ogc.beginPath();

ogc.lineWidth= 20;

/*

            butt  默认。向线条的每个末端添加平直的边缘。            round  向线条的每个末端添加圆形线帽。            square 向线条的每个末端添加正方形线帽。*/

        ogc.lineCap= 'butt';

ogc.moveTo(250,220);

ogc.lineTo(250,150);

ogc.stroke();

ogc.restore();

ogc.beginPath();

ogc.moveTo(150,20);

ogc.lineTo(250,10);

ogc.lineTo(250,30);

ogc.closePath();

ogc.fill();

ogc.beginPath();

ogc.lineWidth= 1;

ogc.rect(50,200,100,100);

ogc.closePath();

ogc.stroke();

//        ogc.clearRect(0,0,oc.width,oc.height);

/**********************************************************************/

        var canvas= document.getElementById('c2');

var context= canvas.getContext('2d');

context.strokeStyle= 'red';

canvas.onmousedown = function (ev) {

var ev= ev || window.event;

context.moveTo(ev.clientX- canvas.offsetLeft, ev.clientY- canvas.offsetTop);

document.onmousemove = function (ev) {

var ev= ev || window.event;

context.lineTo(ev.clientX- canvas.offsetLeft, ev.clientY- canvas.offsetTop);

context.stroke();

};

document.onmouseup = function () {

document.onmousemove= null;

document.onmouseup= null;

}

};

var num= 0;

context.fillRect(0,0,100,100);

var timer= setInterval(function () {

if(num>=300){

return;

}

context.clearRect(num, num,100,100);

num++;

context.fillRect(num, num,100,100);

},30);

}