HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5

html教程 跟版网
本文通过八种示例给大家分享了html5 canvas绘图，需要的朋友一起来学习吧

HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。

好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。

1、使用Canvas绘制直线：


 

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     </head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.moveTo(20,30);//第一个起点   
  17.             cans.lineTo(120,90);//第二个点   
  18.             cans.lineTo(220,60);//第三个点（以第二个点为起点）   
  19.             cans.lineWidth=3;   
  20.             cans.strokeStyle = 'red';   
  21.             cans.stroke();   
  22.         }   
  23.     </script>  
  24.     <body onload="pageLoad();">  
  25.         <canvas id="can" width="400px" height="300px">4</canvas>  
  26.     </body>  
  27. </html>  

这里用到的两个API方法，moveTo和lineTo分别是线段的起点和终点坐标，变量为（X坐标,Y坐标）,strokeStyle、stroke分别路径绘制样式和绘制路径。

2、绘制渐变线条

渐变线条就是颜色有渐变的效果，当然渐变的样式可以遵循路径的方向也可以不遵循路径的方向：

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     </head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.moveTo(0,0);   
  17.             cans.lineTo(400,300);   
  18.             var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标   
  19.             gnt1.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色   
  20.             gnt1.addColorStop(1,'yellow');   
  21.             cans.lineWidth=3;   
  22.             cans.strokeStyle = gnt1;   
  23.             cans.stroke();   
  24.         }   
  25.     </script>  
  26.     <body onload="pageLoad();">  
  27.         <canvas id="can" width="400px" height="300px">4</canvas>  
  28.     </body>  
  29. </html>  

3、绘制矩形或正方形：

这种矩形框如果使用HTML4只能使用后台代码才能生成了，现在HTML5提供的Canvas功能却很容易就能绘制，所以说HTML5的优越性是相当高的。

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     </head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.fillStyle = 'yellow';   
  17.             cans.fillRect(30,30,340,240);   
  18.         }   
  19.     </script>  
  20.     <body onload="pageLoad();">  
  21.         <canvas id="can" width="400px" height="300px">4</canvas>  
  22.     </body>  
  23. </html>  

这里使用了一个方法——fillRect（）从字面意思也能知道这个就是填充一个矩形，这里的参数值得说明一下fillRect(X,Y,Width,Height)，这个和数学里的坐标是不一样的，具体请看

这里的X，Y是相对Canvas左上角的起点开始的，谨记！！

4、绘制一个简单的矩形框

上例中讲到要绘制一个矩形块，填充了颜色，这个例子只是简单地绘制一个矩形而不实现填充效果。

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     </head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.strokeStyle = 'red';   
  17.             cans.strokeRect(30,30,340,240);   
  18.         }   
  19.     </script>  
  20.     <body onload="pageLoad();">  
  21.         <canvas id="can" width="400px" height="300px">4</canvas>  
  22.     </body>  
  23. </html>  
  24.   

这个很简单，和上例一样，就是将fill替换成了stroke，具体详见上例。

 5、绘制一个线性渐变的矩形

渐变是填充的一种相当不错的效果，结合实例2和实例3，我们可以创建一个渐变的矩形

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     </head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             var gnt1 = cans.createLinearGradient(10,0,390,0);   
  17.             gnt1.addColorStop(0,'red');   
  18.             gnt1.addColorStop(0.5,'green');   
  19.             gnt1.addColorStop(1,'blue');   
  20.             cans.fillStyle = gnt1;   
  21.             cans.fillRect(10,10,380,280);   
  22.         }   
  23.     </script>  
  24.     <body onload="pageLoad();">  
  25.         <canvas id="can" width="400px" height="300px">4</canvas>  
  26.     </body>  
  27. </html>  
  28.   

不解释了，记住fillRect（X,Y,Width,Height）就行了。

6、填充一个圆形


圆形的用途很广，当然也包含了椭圆。

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     </head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,true);   
  18.             cans.closePath();   
  19.             cans.fillStyle = 'green';//本来这里最初使用的是red，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~~   
  20.             cans.fill();   
  21.         }   
  22.     </script>  
  23.     <body onload="pageLoad();">  
  24.         <canvas id="can" width="400px" height="300px">4</canvas>  
  25.     </body>  
  26. </html>  
  27.   

这里的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）；

arc中各参数比较：

a、cans.arc(200,150,100,0,Math.PI,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

c、cans.arc(200,150,100,0,Math.PI/2,true);

d、cans.arc(200,150,100,0,Math.PI/2,false);

 

 7、圆形区块

 

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     </head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,false);   
  18.             cans.closePath();   
  19.             cans.lineWidth = 5;   
  20.             cans.strokeStyle = 'red';   
  21.             cans.stroke();   
  22.         }   
  23.     </script>  
  24.     <body onload="pageLoad();">  
  25.         <canvas id="can" width="400px" height="300px">4</canvas>  
  26.     </body>  
  27. </html>  

这里不解释了，和上边的例子相同，lineWidth是控制线条的宽度的。

8、圆形渐变

 

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.     </head>  
  6.     <style type="text/css">  
  7.         canvas{border:dashed 2px #CCC}   
  8.     </style>  
  9.     <script type="text/javascript">  
  10.         function $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         function pageLoad(){   
  14.             var can = $$('can');   
  15.             var cancans = can.getContext('2d');   
  16.             var gnt = cans.createRadialGradient(200,300,50,200,200,200);   
  17.             gnt.addColorStop(1,'red');   
  18.             gnt.addColorStop(0,'green');   
  19.             cans.fillStyle = gnt;   
  20.             cans.fillRect(0,0,800,600);   
  21.         }   
  22.     </script>  
  23.     <body onload="pageLoad();">  
  24.         <canvas id="can" width="800px" height="600px">4</canvas>  
  25.     </body>  
  26. </html>  

这里需要说明的是createRadialGradient方法，参数有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是说，它在实行渐变时，使用了两个圆，一个是原始的圆，一个是渐变式圆，其实，这种通过坐标与半径控制的方式可以实现很多样式，比如

立体圆

 

XML/HTML Code复制内容到剪贴板
  1. var gnt = cans.createRadialGradient(200,150,0,200,50,250);   
  2. gnt.addColorStop(0,'red');   
  3. gnt.addColorStop(1,'#333');  
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

HTML5之Canvas基础绘图教程
HTML5 火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线： !doctype html ht
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
这篇文章主要介绍了利用HTML5 Canvas制作键盘及鼠标动画的实例,文中分别分享了一个键盘控制的小球移动和鼠标触发的小丑小脸例子,需要的朋友可以参考下
通过HTML5 Canvas API绘制弧线和圆形的教程
这篇文章主要介绍了通过HTML5 Canvas API绘制弧线和圆形的教程,用JavaScript可以自定义弧度以及设定起始终末点,使用JavaScript需要的朋友可以参考下
HTML5 canvas实现移动端上传头像拖拽裁剪效果
这篇文章主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5 canvas移动浏览器上实现图片压缩上传
这篇文章主要为大家详细介绍了html5 canvas移动浏览器上实现图片压缩上传的相关方法，提出了解决方法，分享了解决问题的思路，感兴趣的小伙伴们可以参考一下
HTML5 Canvas实现烟花绽放特效
这是一个款绚丽的HTML5 Canvas动画，它将模拟的是我们生活中烟花绽放的动画特效，效果非常逼真，下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，感兴趣的小伙伴们可以参考一下
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室