canvas元素

简介：在新的HTML标准HTML5中Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。如：矩形、圆形、字符以及添加图像等。

实例：

1、添加canvas元素： <canvas id="myCanvas" width="200" height="100"></canvas>

2、通过javaScript来绘制图形（canvas元素本身没有绘图能力）

绘制红色矩形

<script type="text/javascript">

    var c=document.getElementById("myCanvas"); // 寻找 canvas 元素,创建 context 对象

    var cxt=c.getContext("2d"); // 内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    cxt.fillStyle="#FF0000"; // 将其染成红

    cxt.fillRect(0,0,150,75);  // 在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

</script>

绘制圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas>

JavaScript 代码：

<script type="text/javascript">
       var c=document.getElementById("myCanvas");
       var cxt=c.getContext("2d");
       cxt.fillStyle="#FF0000";
       cxt.beginPath();
       cxt.arc(70,18,15,0,Math.PI*2,true);
       cxt.closePath();
       cxt.fill();
    </script>

绘制渐变

使用您指定的颜色来绘制渐变背景：

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas>

JavaScript 代码：

<script type="text/javascript">
      var c=document.getElementById("myCanvas");
      var cxt=c.getContext("2d");
      var grd=cxt.createLinearGradient(0,0,175,50);
      grd.addColorStop(0,"#FF0000");
      grd.addColorStop(1,"#00FF00");
      cxt.fillStyle=grd;
      cxt.fillRect(0,0,175,50);
   </script>

绘制图像

把一幅图像放置到画布上：

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas>

JavaScript 代码：

<script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        var img=new Image()
        img.src="flower.png"
        cxt.drawImage(img,0,0);
    </script>