[ 登录注册 ]

HTML5

HTML5 Canvas画图

2016-08-17 14:08:16 admin 返回上一页

按照官方例子画了几个基本图形,算是对于HTML5 Canvas有所了解,但是感觉这里面数学知识太忘记了,虽然以前数学竞赛出身,但是好多年不用了,有所遗忘。
HTML5的canvas元素只是提供了一个画布,而实际的绘制工作由javascript来完成。
基本HTML不说了, 也就是搭一个架子,放一个<canvas>元素,然后首部引入一些javascript文件,这里面每一个js文件都是一个画图的例子.
1. <!DOCTYPE html>
2. <head>
3. <meta charset="UTF-8">
4. <title>HTML5 Canvas DEMO</title>
5. <script type="text/javascript" src="js/drawRect.js"></script>
6. <script type="text/javascript" src="js/drawPath.js"></script>
7. <script type="text/javascript" src="js/drawLine.js"></script>
8. <script type="text/javascript" src="js/drawLinearGradient.js"></script>
9. <script type="text/javascript" src="js/drawTransformShape.js"></script>
10. <script type="text/javascript" src="js/drawAll.js"></script>
11. </head>
12. 
13. <body onload="drawAll('canvas')"></body>
14. <h2>canvas:放开你的梦想</h2>
15. <canvas id="canvas" width="400" height="300"/>
16. <br><br>
例子1:绘制矩形
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.com)
5.  */
6.  
7.  //这段js代码用于画一个长方形
8.  //参数是传进来的画布canvas的id,表明这段代码画在哪里
9.  function drawRect(id){
10.     
11.     //取得canvas对象,也就是我们js代码要画的canvas对象
12.     var canvas=document.getElementById('canvas');
13.     if (canvas==null)
14.         return false;
15.         
16.     //从canvas取得图形上下文,这个图形上下文context封装了许多绘画方法,这是一个内置的html5对象
17.     var context=canvas.getContext('2d');
18.     //设定好当前图形上下文的样式,夜就是当前使用颜色来绘制图形,此外还有一些其他的样式
19.     context.fillStyle="#0044FF";
20.     //fillXXX用来填充图形的内部,这里fillRect,表明用当前颜色填充图形内部,4个参数分别为起点横坐标/起点纵坐标/宽度/高度
21.     context.fillRect(0,0,400,300);
22.     //颜色值既可以用十六进制命名,也可以使用颜色名
23.     context.fillStyle="red";
24.     context.strokeStyle="blue";
25.     //用于设置图形边框的宽度
26.     context.lineWidth=1;
27.     context.fillRect(50,50,100,100);
28.     //strokeXXX用来描述图形的边框(stroke),这里strokeRect,表明用来绘制刚才矩形的边框
29.     context.strokeRect(50,50,100,100);
30.  }

  画出来的结果是:

 


1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.com)
5.  */
6.  
7.  function drawPath(id){
8.     
9.     var canvas=document.getElementById(id);
10.     if(canvas == null)
11.         return false;
12.     
13.     //依旧先拿到canvas对象和上下文对象
14.     var context = canvas.getContext("2d");
15.     //先绘制画布的底图
16.     context.fillStyle="#EEEEEF";
17.     context.fillRect(0,0,400,300);
18.     
19.     //用循环绘制10个圆形
20.     var n = 0;
21.     for(var i=0 ;i<10;i++){
22.         //开始创建路径,因为要画圆,圆本质上也是一个路径,这里向canvas说明,我要开始画了,这是起点
23.         context.beginPath();
24.         //画一个拱形(arcade),因为圆是一种特殊的拱形
25.         //6个参数分别是 起点横坐标,起点纵坐标,圆的半径,起始弧度,结束弧度(2PI刚好是360度),是否顺时针
26.         context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
27.         //关闭路径
28.         context.closePath();
29.         context.fillStyle="rgba(255,0,0,0.25)";
30.         //填充刚才所画的圆形
31.         context.fill();
32.     }
33.  }
 画出来的结果是:



 

例子3:绘制直线,并且用直线组合复杂图形
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.com)
5.  */
6.  
7.  function drawLine(id){
8.     
9.     var canvas=document.getElementById(id);
10.     if(canvas==null)
11.     return false;
12.     var context = canvas.getContext('2d');
13.     context.fillStyle="#FF00FF";
14.     context.fillRect(0,0,400,300);
15.     
16.     var n=0;
17.     var dx=150;
18.     var dy=150;
19.     var s = 100;
20.     context.beginPath();
21.     context.fillStyle='rgb(100,255,100)';
22.     context.strokeStyle='rgb(0,0,100)';
23.     var x = Math.sin(0);
24.     var y = Math.cos(0);
25.     var dig=Math.PI/15*11;
26.     for(var i = 0;i<30;i++){
27.         var x = Math.sin(i*dig);
28.         var y = Math.cos(i*dig);
29.         //用三角函数计算顶点
30.         context.lineTo(dx+x*s,dy+y*s);
31.     }
32.     context.closePath();
33.     context.fill();
34.     context.stroke();
35.  }
画出来的结果是:

 

 

例子4:使用线性渐变
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.com)
5.  */
6.  
7.  //渐变用于填充,是指填充图形时从某种颜色慢慢过渡到另外一种颜色
8.  //线性渐变是指在一个线段之间进行渐变,线段上每个点随着离开起点的位移值的变化,其颜色也在变化
9. function drawLinearGradient(id){
10.     
11.     var canvas = document.getElementById(id);
12.     if(canvas==null)
13.     return false;
14.     
15.     //我们还是先绘制底图,这次,我们的底图也用了渐变
16.     var context = canvas.getContext('2d');
17.     //第一个渐变,用于底图,它调用了createlinearGradient创建了一个渐变
18.     //4个参数分别为起点的横坐标,起点的纵坐标,结束点的横坐标,结束点的纵坐标,所以本例就是从(0,0)到(0,300),所以是一个竖直向下的渐变 www.2cto.com
19.     var gradient1=context.createLinearGradient(0,0,0,300);
20.     //addColorStop可以设置渐变的颜色,第一个参数表示偏移量(0-1)之间,第二个参数表示颜色
21.     //所以,我们定义了从黄色到蓝色的渐变
22.     gradient1.addColorStop(0,'rgb(255,255,0)');
23.     gradient1.addColorStop(1,'rgb(0,255,255)');
24.     //将上下文对象关联到当前的渐变设定作为填充风格
25.     context.fillStyle=gradient1;
26.     //用我们定义的渐变来绘制底图
27.     context.fillRect(0,0,400,300);
28.     
29.     var n = 0;
30.     //这次我们要画一组圆圈,我们定义一个从(0,0)到(300,0)也就是水平方向从左到右的渐变
31.     var gradient2=context.createLinearGradient(0,0,300,0);
32.     //设置渐变色的起始颜色和终止颜色
33.     gradient2.addColorStop(0,'rgba(0,0,255,0.5');
34.     gradient2.addColorStop(1,'rgba(255,0,0,0.5)');
35.     //用循环画圆,并且用渐变色填充
36.     for(var i=0;i<10;i++){
37.         context.beginPath();
38.         context.fillStyle=gradient2;
39.         context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
40.         context.closePath();
41.         context.fill();
42.     }
43. }
画出来的结果是:

 


 

例子5:图形基本变换(平移,缩放,旋转)
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.com)
5.  */
6.  
7.  
8.  //这个函数用于演示一些常用的坐标变换
9.  //常见的坐标变换有平移,缩放,旋转
10.  function drawTransformShape(id){
11.     
12.     var canvas = document.getElementById(id);
13.     if(canvas == null) 
14.         return false;
15.     //画底图
16.     var context = canvas.getContext('2d');
17.     context.fillStyle="#FF00FF";
18.     context.fillRect(0,0,400,300);
19.     
20.     //移动坐标轴的原点,因为这里向右边平移了200,向下移动了50,所以水平方向是居中了
21.     context.translate(200,50);
22.     
23.     //循环可以画一系列的五角星
24.     for(var i=0;i<50;i++){
25.         //每次坐标轴的原点往右下各移动25像素
26.         context.translate(25,25);
27.         //并且每次进行缩放到0.95倍
28.         context.scale(0.95,0.95);
29.         //然后把这个图形进行旋转,每次转动+18度(也就是顺时针)
30.         context.rotate(Math.PI/10);
31.         //然后在当前位置画一个五角星
32.         create5star(context);
33.         //并且填充当前五角星
34.         context.fill();
35.     }
36.     
37.  }
38.  
39.  
40.  //这个函数用于绘制一个五角星
41.  function create5star(context){
42.     var n = 0;
43.     var dx = 100;
44.     var dy = 0 ;
45.     var s = 50;
46.     //创建路径
47.     context.beginPath();
48.     context.fillStyle="rgba(255,0,0,0.5)";
49.     var x = Math.sin(0);
50.     var y= Math.cos(0);
51.     var dig = Math.PI/5 *4;
52.     //画五角星的五条边
53.     for(var i = 0;i<5;i++){
54.         var x = Math.sin(i*dig);
55.         var y = Math.cos(i*dig);
56.         context.lineTo(dx+x*s,dy+y*s);
57.     }
58.     context.closePath();
59.  }
60.  
61.  
画出来的结果是:

 




摘自 平行线的凝聚

点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377620.html
返回上一页    返回分类 上一篇:   下一篇:
相关