欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5 canvas画布

程序员文章站 2022-03-02 11:00:12
html5中canvas元素用于在网页上绘制图形。 canvas的特点 canvas画布是一个矩形区域,可以控制其每一个像素 canvas使用javascript来控制画图 c...

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(否则中文乱码),使用打开就可以看到如下效果:
HTML5 canvas画布


这里创建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>

运行结果如下:
HTML5 canvas画布


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

运行结果如下:
HTML5 canvas画布

渐变


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

效果如下:
HTML5 canvas画布

图像


<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画布中了。我的运行效果如下,图片百度随便找的,凑合看~~
HTML5 canvas画布