首页 > 程序开发 > web前端 > HTML 5 > 正文
HTML5 canvas画布
2016-06-23       个评论    来源:专注C/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(否则中文乱码),使用浏览器打开就可以看到如下效果:
canvsf运行效果

这里创建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画布中了。我的运行效果如下,图片百度随便找的,凑合看~~
这里写图片描述

 
 
点击复制链接 与好友分享!回本站首页
相关TAG标签 画布
上一篇:HTML+CSS3-》第2阶段:HTML5基础和HTML语义化 下
下一篇:HTML5多媒体audio和video(一)
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站