html5 canvas绘图工具开发备忘

1.html5标签与html4的标签在ie中出现不兼容得问题，导致ie中绘图api无效。

例如：

<p> <canvas></canvas> </P> 

绘图js失效。

 

2.使用canvas客户端api画三角形的方法

 

1).定义画布画笔，使用客户端api方法getContext("2d").

 

2).定义图形填充颜色图形，边框颜色，边框宽度，用到api的方法,fillStyle,strokeStyle,lineWidth等

 

3).用api的开始path的方法,beginPath(),然后定义三角形的起点moveTo(X,y),用lineTo(Z,Q)定义其他两个端点、结束的点。

 

4).实例化fill(),stroke(),并使用客户端path的结束的方法closePath(),结束编码。

代码：

var TriangleElem = document.getElementById("Triangle"); var context = TriangleElem.getContext("2d"); //定义三角形填充颜色边线颜色边线宽度 context.fillStyle="#00f"; context.strokeStyle="#f00"; context.lineWidth="6"; context.beginPath(); context.moveTo(200,200); context.lineTo(200,10); context.lineTo(10,200); context.lineTo(200,200); context.fill(); context.stroke(); context.closePath();