HTML5学习笔记之使用canvas绘制矩形

作用：

       绘制图形

原理：

      canvas本身是一个无色透明的区域，需要使用javascript编写在其中进行绘制的脚本

元素示例：

    <canvas id="canvas"  />

绘制步骤（以绘制矩形为例）：

1.获取canvas元素：可以使用var canvas = document.getElementById("canvas")获取canvas对象；

2.获得图形上下文：var context = canvas.getContext("2d");图形上下文中是一个封装了很多绘画功能的对象；

3.填充与绘制图形边框：绘制图形的两种方式

4.绘制图形样式：在进行图形绘制的时候，首先要设定好绘图的样式，然后调用有关方法进行图形的绘制；绘图的样式主要是针对颜色。

    1）设定填充图形的样式：fillStyle

    2）设定图形边框的样式：stokeStyle

5.指定宽度：使用图形上下文对象的lingWidth属性设置图形边框的宽度；

6.指定颜色值：用fillStyle或stokeStyle指定填充颜色或边框颜色值

7.绘制图形：如使用fillRect方法或stokeRect绘制填充矩形或边框矩形，方法定义如下

    1）context.fillRect(x,y,width,height);

    2）context.stokeRect(x,y,width,height);

    参数说明：x是矩形起点的横坐标，y是矩形起点的纵坐标，坐标原点是canvas画布的最左上角，width指定了矩形的宽度，height指定了矩形的长度；

代码示例：

<h1>canvas元素学习</h1>

    <canvas id="canvas" />

    

    <script type="text/javascript">

        var canvas = document.getElementById("canvas");

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

        context.lineWidth=3;

        context.fillStyle="#555555";

        context.fillRect(1,1,20,20);

        

    </script>

效果如下：



对于矩形，还有一个方法clearRect(x,y,width,height);该方法是用于擦除指定位置、大小的矩形，擦除区域显示为透明矩形。如在上例中添加代码context.clearRect(2,2,5,5);

效果如下：