使用HTML画布动态绘制和绘制Square

时间:2013-07-15 10:18:54

标签: html html5 canvas html5-canvas jcanvas

我需要使用html canvas绘制下面给出的图表。任何人都可以帮助我。

http://1.bp.blogspot.com/-em2abcEg5nU/Ts_c3cNtfMI/AAAAAAAAABU/eQWc6SJtD0M/s1600/t31.jpg

1 个答案:

答案 0 :(得分:0)

首先访问画布:

var can=document.getElementById('canvas1')

现在您需要一个上下文来执行绘图功能:

var pen=can.getContext('2d')

要画线,请执行以下操作:

pen.beginPath()
pen.moveTo(0,0)
pen.lineTo(50,50)
pen.closePath()
pen.strokeStyle=rgb(255,0,0)
pen.stroke()

要填充路径(如三角形),请执行以下操作:

pen.beginPath()
pen.moveTo(0,0)
pen.lineTo(50,50)
pen.lineTo(0,50)
pen.closePath()
pen.fillStyle=rgb(255,0,0)
pen.fill()