HTML5-canvas绘制路径

HTML5-canvas绘制路径

 

使用Canvas绘制路径(Path)

 

  提示：Canvas中的路径概念与Photoshop中钢笔工具类似的。路径本身是不可见的，有三个用途：描边、填充(闭合)、裁剪(闭合)

 

  Canavs中与路径绘制相关方法：

 

  ctx.beginPath()   //开始一条新路径

 

ctx.closePath()       //闭合路径，让最后一个锚点自动连接到第一个锚点

 

ctx.moveTo(x, y)     //移动到指定点

 

  ctx.lineTo(x,y)      //从当前点到指定点绘制直线路径

 

  ctx.arc()              //绘制拱形路径

 

  ctx.ellipse()         //绘制椭圆路径

 

  ctx.bezierCurveTo()    //绘制贝塞尔曲线路径

 

----------------------------------------------

 

  ctx.stroke()

 

  ctx.fill()

 

  ctx.clip()

 

 

使用直线路径绘制坐标轴

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title></title>
 6   <style>
 7     body {
 8       text-align: center;
 9     }
10     canvas {
11       background: #f0f0f0;
12     }
13   </style>
14 </head>
15 <body>
16   <h3>绘制路径——直线</h3>
17   <canvas id="c3" width="600" height="400"></canvas>
18   <script>
19     var ctx = c3.getContext('2d');
20 
21     //绘制X轴
22     ctx.beginPath();
23     ctx.moveTo(50, 350);    //坐标轴原点
24     ctx.lineTo(550,350);    //最右侧点
25     ctx.lineTo(550-20,350-20);
26     ctx.moveTo(550,350);    //最右侧点
27     ctx.lineTo(550-20,350+20);
28 
29     ctx.lineWidth = 5;
30     ctx.strokeStyle = '#f00';
31     //ctx.lineJoin = 'bevel'; //斜面、修改折线拐点处的样式
32     ctx.lineJoin = 'round'; //圆角、修改折线拐点处的样式
33     //ctx.lineJoin = 'miter'; //尖角、修改折线拐点处的样式
34     ctx.stroke();
35 
36     //绘制Y轴     最顶端：(50,50)
37     ctx.beginPath();  //注意此处！
38     ctx.moveTo(50-20,50+20);
39     ctx.lineTo(50,50);
40     ctx.lineTo(50+20,50+20);
41     ctx.moveTo(50,50);
42     ctx.lineTo(50,350);
43 
44     ctx.strokeStyle = '#0f0';
45     ctx.stroke();
46   </script>
47 </body>
48 </html>
View Code

 

使用圆拱+定时器绘制可以前进的进度条

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title></title>
 6   <style>
 7     body {
 8       text-align: center;
 9     }
10     canvas {
11       background: #f0f0f0;
12     }
13     #box{
14         position:relative;
15     }
16     #number{
17         position:absolute;
18         top:44%;
19         left:47%;
20         font-size:3em;
21         color:green;
22     }
23   </style>
24 </head>
25 <body>
26   <h3>绘制路径——圆拱</h3>
27   <div id = 'box'>
28         <canvas id="c3" width="600" height="400"></canvas>
29         <div id='number'>12</div>
30   </div>
31   <script>
32     var ctx = c3.getContext('2d');
33 
34     //绘制灰色的圆环
35     ctx.beginPath();
36     ctx.arc(300,200,100, 0, 2*Math.PI);
37 
38     ctx.strokeStyle = '#aaa';
39     ctx.lineWidth = 15;
40     ctx.stroke();
41 
42     //绘制变色的进度环
43     var start = -Math.PI/2;
44     var deg = 0; //进度环前进的角度
45     var nm = 0;
46     var timer = setInterval(function(){
47       ctx.beginPath();  //注意此处！
48       deg += 5;
49       nm += 1;
50       ctx.arc(300,200,100,start, start+deg*Math.PI/180);
51       ctx.strokeStyle = '#f00';
52       ctx.stroke();
53       var ndiv = document.getElementById('number')
54         ndiv.innerHTML = nm+"%";
55       if(deg == 360){
56         clearInterval(timer);
57       }
58     },100);
59     
60 
61   </script>
62 </body>
63 </html>
View Code

 

 

使用Canvas绘制图像

 

  注意：图片的定位点在图片的左上角。客户端JS必须等待图片加载完成才能开始绘制。

 

var img = new Image();

 

  img.src = 'x.jpg';

 

  img.onload = function(){

 

       //图片已经加载完成了

 

       ctx.drawImage(img, x, y)   //使用默认的宽高

 

       ctx.drawImage(img, x, y, w, h)

 

  }

 

小结：Canvas绘图可以绘制的内容：

(1)矩形： ctx.fillRect()   ctx.strokeRect()   ctx.clearRect()

(2)文本： ctx.fillText()   ctx.strokeText()   ctx.measureText()

(3)路径 - 描边/填充/裁剪

   ctx.beginPath()   ctx.closePath()

   ctx.moveTo()   ctx.lineTo()   ctx.arc()

   ctx.stroke()  ctx.fill()   ctx.clip()

(4)图像：  ctx.drawImage()

 

如何为Canvas上的图形/图像绑定事件监听？——难点

  网页只能为DOM元素绑定监听函数，Canvas绘图技术中只要一个Canvas元素，其它图形图像都不是元素——无法进行事件绑定！——

解决办法：为Canvas绑定监听函数，获取事件发生的坐标，是否处于目标图形/图像所在范围内——只能为规则的图形“绑定”监听

posted @ 2017-01-07 14:26  时间脱臼  阅读(736)  评论(0)    收藏  举报