html5的canvas元素使用javascript在网页上绘制图像。canvas的基本属性和方法有：width,height,getContext()等。通过width与height来设置canvas的宽高。通过getContext()来获取当前画布的绘图环境。

创建canvas元素

向html5添加canvas元素，设置宽高。

<canvas></canvas> 通过javascript绘制图形

canvas本身并不能绘图，而是通过js来实现。添加js：

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#f00"; cxt.fillRect(10,10,100,70); </script>

使用id寻找到canvas

var c=document.getElementById("myCanvas");

创建context对象

var cxt=c.getContext("2d");

绘制一个红色矩形，并设置其起点和大小。其中fillRect(10,10,100,70)是设置一个矩形，起点为(10,10)，大小是(100,70)：

cxt.fillStyle="#f00"; cxt.fillRect(10,10,100,70);

效果如下图：

canvas实例：线条 <canvas></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(100,70); cxt.lineTo(30,50); cxt.stroke(); </script>

效果如下：

canvas实例：圆形 <canvas></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#f00"; cxt.beginPath(); cxt.arc(75,50,20,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script>

效果如下：