html5教程-HTML5 canvas画布

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

Canvas的特点

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

Canvas标签的使用

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

<script ty PE ="text/javascript"> VAR c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle=" # FF0000"; cxt.fillRect(0,0,200,200); </script>

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

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

      var c=document.getElementById(" ;m yCanvas");     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.l inet o(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.be gin Path(); 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.createLine arg ra die nt(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画布中了。我的运行效果如下，图片 百度 随便找的，凑合看~~

&nbs p;

 

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

 

 

觉得 可用，就经常来吧！ 欢迎评论哦！  html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！

总结

以上是 为你收集整理的 html5教程-HTML5 canvas画布 全部内容，希望文章能够帮你解决 html5教程-HTML5 canvas画布 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-HTML5 canvas画布的详细内容...