HTML5 Canvas

canvas 元素用于在网页上绘制图形。

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建方法：<canvas  id="myCanvas" width="250" height="250" >your browser didn't support!</canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
       var c=document.getElementById("myCanvas");     //获得canvas的实例//
       var cxt=c.getContext("2d");       //创建绘制的方式//
       cxt.fillStyle="#FF0000";       //设置填充颜色//
       cxt.fillRect(0,0,150,75);       //绘制矩形//
</script>

使用canvas可以绘制矩形、圆、线条、还可以加载图片，绘制的方法都差不多，下面是加载图片:

<script type="text/javascript">

       var c=document.getElementById("myCanvas");
       var cxt=c.getContext("2d");
       var img=new Image()
       img.src="filename.png"
       cxt.drawImage(img,0,0);

</script>