function getContext(id) {
return document.getElementById(id).getContext('2d');
}
function demo () {
var cxt = getContext('canvas');
cxt.beginPath();
cxt.moveTo(70, 140);
cxt.lineTo(140, 70);
cxt.lineTo(140, 140);
cxt.closePath();
cxt.stroke();
cxt.beginPath();
cxt.moveTo(0, 0);
cxt.lineTo(100, 100);
cxt.stroke();
}
刚刚开始学习canvas,对其有了一个基本的了解,基本原理是先定义图形然后绘制。以上面代码为例,第一个stroke之前的语句只是定义图形并没有在画布中显现出来,stroke()才真正的将之前定义的图形绘制在画布上。如果没有stroke又开始了一个新的beginPath,新的beginPath会清除之前所有的图形定义,当再次stroke时只会绘制从新beginPath开始定义的图形。