HTML5 canvas画布

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

canvas的特点

canvas画布是一个矩形区域，可以控制其每一个像素 canvas使用javascript来控制画图 canvas具有直线、矩形、圆以及添加图像的方法

canvas标签的使用

下面的代码是使用canvas画面绘制一个200*200红色矩形：

<script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,200,200); </script>

将上面的代码保存为canvas.html，并将其编码设置为utf-8（否则中文乱码），使用打开就可以看到如下效果：

这里创建canvas标签，并定义其id为mycanvas，便于javascript绘图时获取该标签对象。
再看javascript绘图部分：

    var c=document.getelementbyid("mycanvas");
    var cxt=c.getcontext("2d");
    cxt.fillstyle="#ff0000";
    cxt.fillrect(0,0,200,200);

第一句getelementbyid，通过canvas标签的id获取canvas对象。
第二句getcontext，获取context对象。
第三句调用context对象的方法fillstyle，即填充其颜色。
第四句调用context对象的fillrect方法指定填充的区域。

canvas的其他实例

直线

<script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.moveto(10,10); cxt.lineto(150,50); cxt.lineto(10,50); cxt.stroke(); </script>

运行结果如下：

圆

<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>

运行结果如下：

渐变

<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>

效果如下：

图像

<script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); var img=new image(); img.src="1.png"; img.onload=function(e){ cxt.drawimage(img,0,0); } cxt.drawimage(img,0,0); </script>

注意，一定要给img添加onload事件，否则图片不显示。
其中，1.png为自己找的图片素材。打开页面可以看到图片显示在canvas画布中了。我的运行效果如下，图片百度随便找的，凑合看~~