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>