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? 創(chuàng)建斜角席吴。? ? ? ? ? ? round? 創(chuàng)建圓角评甜。? ? ? ? ? ? miter? 默認(rèn)柔纵。創(chuàng)建尖角*/
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? 默認(rèn)唆缴。向線條的每個末端添加平直的邊緣。? ? ? ? ? ? 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);
}
