HTML5 绘制矩形与三角形

【例题】利用canvas绘制矩形

    canvas只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在canvas元素上绘图主要有三步：

1.获取canvas元素对应的DOM对象，这是一个Canvas对象。

2.调用Canvas对象的getContext()方法，得到—个CanvasRenderingContext2D对象。

3.调用CanvasRende「ingContext2D对象进行绘图。

    绘制矩形rect()、fillRect()和strokeRect():

    © context.rect( x，y，width，height ):只定义矩形的路径。

    © context.fillRect( x，y，width，height):直接绘制出填充的矩形。

    © context.strokeRect( x，y，width，height )直接绘制出矩形边框。

HTML代码如下：

<canvas id="demo" width="300" height="300"></canvas>

JavaScript代码如下：

<script>

Var canvas=document.getElementById ("demo");

Var context=canvas.getContext("2d");

//使用rect方法

context.rect(10,10,190,190); 

context.lineWidth = 2; 

context.fillStyle = "#3EE4CB";

context.strokeStyle ="#F527OB";

context.fill(); 

context.stroke();

//使用fillRect方法

context.fillStyle ="#1424DE";

context.fillRect(210,10,190,190);

/ /使用strokeRect方法

context.strokeStyle = "#F5270B";

context.strokeRect(410,10,190,190);

/ /同时使用strokeRect方法和fillRect方法

context.fillStyle = "#1424DE";

context.strokeStyle = "#F5270B";

context.strokeRect(610,10,190,190);

context.flllRect(610,10,190,190);

</script〉