首页 > web前端 > H5教程 > 正文

HTML5 CANVAS:绘制路径

WBOY
发布: 2016-05-17 09:07:28
原创
1972 人浏览过
1.jpg

  一条HTML5 canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线。路径可以用于在HTML5 canvas上绘制各种类型的图形:直线、圆形、多边形等等。路径的绘制是canvas的核心,必须很好的理解和掌握。

  开始和关闭一条路径

  要开始和关闭一条路径可以使用2D上下文的beginPath()和closePath()函数。例如下面的例子:
  1. var canvas  = document.getElementById("ex1");
  2. var context = canvas.getContext("2d");

  3. context.beginPath();

  4. //... 绘制路径

  5. context.closePath();      
复制代码

  moveTo()函数

  当你在canvas中绘制一条路径的时候,你可以想象自己正在使用一支“虚拟笔”。这支虚拟笔总是位于某个位置,你可以使用2D上下文的moveTo(x, y)函数来移动这支虚拟笔。例如下面的代码:
  1. context.moveTo(10,10);         
复制代码

  这个例子将“虚拟笔”移动到(10,10)这个坐标点上。

  lineTo()函数

  lineTo函数用于从虚拟笔的当前位置绘制一条直线到lineTo()函数中指定的点。下面是一个例子:
  1. context.beginPath();

  2. context.moveTo(10,10);
  3. context.lineTo(50,50);

  4. context.closePath();   
复制代码

  这个例子中首先移动虚拟笔到(10,10)坐标点位置,然后从这个点绘制一条直线到(50,50)坐标点。

  lineTo()函数还会将虚拟笔移动到执行的结束点位置。上面的例子中是移动到(50,50)的位置。

  stroke()函数 + fill()函数

  在你没有通知2D上下文绘制路径之前,实际是不会在画布上绘制任何东西的。你可以通过stroke()或fill()函数来通知2D上下文。

  stroke()函数用于路径操作指定的图形的外轮廓。

  fill()函数用于填充有路径操作指定的图形。

  下面的例子展示了stroke()或fill()函数的用法。
  1. context.beginPath();
  2. context.moveTo(10,10);
  3. context.lineTo(60,50);
  4. context.lineTo(110,50);
  5. context.lineTo(10,10);
  6. context.stroke();
  7. context.closePath();

  8. context.beginPath();
  9. context.moveTo(100,10);
  10. context.lineTo(150,50);
  11. context.lineTo(200,50);
  12. context.lineTo(100,10);
  13. context.fill();
  14. context.closePath();   
复制代码

  上面代码的返回结果如下:

2.jpg

  线条的宽度

  你可以使用2D上下文的lineWidth属性来设置绘制线条的宽度。下面是一个例子:
  1. context.lineWidth = 10;            
复制代码

  上面的例子设置绘制线条的宽度为10像素。

  下面的例子绘制3条直线,它们的宽度分别为1,5和10。

3.jpg

  当你绘制的线条宽度大于1的时候,扩展的线条宽度将平均分配在线条中心线的两侧。距离来说,如果你从(10,10)这个点绘制一条直线到(100,10)这个点,线条的宽度为10,那么,实际上是从(10,5)这个点开始绘制,然后扩展到(10,15)这个点,在水平绘制到(100,5)和(100,15)这两个点,就像是绘制一个矩形。

  线条的线条(LINE CAP)

  在使用路径来绘制线条的时候,你可以设置线条的线头样式。线头的样式通过2D上下文的lineCap属性来设置。它有三个可选值:

  •   butt
  •   round
  •   square

  butt样式的线头是扁平且和线正交的样式。

  round样式的线头是一个圆角的线头,圆的半径等于线条宽度的一半。

  square样式的线头会在线的末端绘制一个矩形。矩形的大小为:线条的宽度 X 线条的宽/2。

  下面是几个不同线头样式的线条的例子。所有的线条的宽度都是10。最总版的一组线条的lineCap的取值为butt,中间的一组线条的lineCap的取值为round,最右边的一组线条的lineCap的取值为square。

4.jpg

  lineCap的取值butt和square非常相似。有时难以区别。这里制作了几个小例子,从这些例子中你可以看出它们之间的微小差别。下面又三组线条,每一组左边(或上边)的线条的lineCap属性取值为butt,右边(或下边)的线条的lineCap属性取值为square。

5.jpg

  正如上面的结果所示,square线头的线条要比butt线头的线条要长。

  线条的连接

  2D上下文的lineJoin属性用于定义两条线条连接处的点如何绘制。两条线条连接处的点被称为“连接点”。lineJoin属性有下面的三种取值:

  •   miter
  •   bevel
  •   round

  下面是这三种取值的示例代码:
  1. context.lineJoin = "miter";
  2. context.lineJoin = "bevel";
  3. context.lineJoin = "round";         
复制代码

  miter的连接点是一个三角形的连接点。

  bevel的连接点是一个平头的连接点。

  round的连接点是一个圆角的连接点。

  下面分别是三种线条连接点的例子,从左到右的lineJoin属性分别是:miter,bevel和round。

6.jpg

  绘制曲线

  2D上下文的arc()函数可以用于绘制一条曲线。arc()函数有6个参数:

  •   x:圆弧的中心点的X坐标位置。
  •   y:圆弧的中心点的Y坐标位置。
  •   radius:圆弧的半径。
  •   startAngle:圆弧开始的角弧度。
  •   endAngle:圆弧结束的角弧度。
  •   anticlockwise:设置是以顺时针还是逆时针绘制圆弧,false为顺时针。

  下面是一段示例代码:
  1. context.lineWidth = 3;

  2. var x = 50;
  3. var y = 50;
  4. var radius = 25;
  5. var startAngle = (Math.PI / 180) * 45;
  6. var endAngle   = (Math.PI / 180) * 180;
  7. var anticlockwise = false;

  8. context.beginPath();
  9. context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
  10. context.stroke();
  11. context.closePath();   
复制代码

  上面的代码绘制了一条弧线,它的中心点位于(50,50)坐标点,半径为25,从45度开始到180度结束。

  下面是上面代码的返回结果:

7.jpg

  上面的例子如果将anticlockwise设置为true,会得到下面的结果:

8.jpg

  如果你要花一个完整的圆,可以简单的设置startAngle为0,endAngle设置为2 * Math.PI,它相当于(Math.PI / 180) * 360。

  arcTo()函数

  2D上下文中有一个arcTo()函数,它用于从当前的点绘制一条曲线到参数指定的点,曲线的半径也由参数指定。它的语法为:arcTo(x1, y1, x2, y2, radius)。注意:参数中x1, y1, x2, y2指的是这个点的控制点。arcTo()函数可以使用lineTo()和arc函数来模仿。

  quadraticCurveTo()函数

  quadraticCurveTo()函数用于绘制一条二次贝兹曲线。这条曲线由一个控制点来控制,它的语法为:quadraticCurveTo(cp1x, cp1y, x, y)。下面是一个示例代码:
  1. context.lineWidth = 3;

  2. var fromX = 50;
  3. var fromY = 50;
  4. var toX   = 100;
  5. var toY   = 50;
  6. var cpX   = 75;
  7. var cpY   = 100;

  8. context.beginPath();
  9. context.moveTo(fromX, fromY);
  10. context.quadraticCurveTo(cpX, cpY, toX, toY);
  11. context.stroke();
  12. context.closePath();         
复制代码

  上面的代码绘制一条从(50,50)开始到(100,50)的二次贝兹曲线,这条曲线的控制点为(75,100)。得到的结果如下所示:

9.jpg

  仔细看,在曲线下方有一个小点,那是这条曲线的控制点。(这个点是专门绘制出来让大家看的)


  关于控制点,可以参考下面的图像:


10.jpg

  bezierCurveTo()函数

  bezierCurveTo()函数用于从一个点到另一个点绘制一条三次贝兹曲线。三次贝兹曲线有两个控制点,而二次贝兹曲线只有一个控制点。它的语法为:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)。下面是一个例子:
  1. context.lineWidth = 3;

  2. var fromX = 50;
  3. var fromY = 50;
  4. var toX   = 300;
  5. var toY   = 50;
  6. var cp1X   = 100;
  7. var cp1Y   = 100;
  8. var cp2X   = 250;
  9. var cp2Y   = 100;

  10. context.beginPath();
  11. context.moveTo(fromX, fromY);
  12. context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
  13. context.stroke();
  14. context.closePath();      
复制代码

  这段代码从(50,50)绘制一条三次贝兹曲线到(300,50),两个控制点分别为:(100,100)和(250,100)。得到的结果如下:

0.jpg

  曲线下方的两个小圆点是两个控制点,他们并不是曲线的一部分。

  下面是一个不同的例子,它的开始点和结束点于上面的例子相同,但是控制点和上面的例子不相同。
  1. context.lineWidth = 3;

  2. var fromX = 50;
  3. var fromY = 50;
  4. var toX   = 300;
  5. var toY   = 50;
  6. var cp1X   = 100;
  7. var cp1Y   = 10;
  8. var cp2X   = 250;
  9. var cp2Y   = 100;

  10. context.beginPath();
  11. context.moveTo(fromX, fromY);
  12. context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
  13. context.stroke();
  14. context.closePath();      
复制代码

  上面的代码得到的结果如下:

11.jpg

  文章的最后,我们引用MDN上的一个例子,它用Canvas路径绘制出“吃豆人”游戏的一个小场景:

12.jpg

  实现的代码如下:
  1. function draw() {
  2.   var canvas = document.getElementById('canvas');
  3.   if (canvas.getContext){
  4.     var ctx = canvas.getContext('2d');

  5.     roundedRect(ctx,12,12,150,150,15);
  6.     roundedRect(ctx,19,19,150,150,9);
  7.     roundedRect(ctx,53,53,49,33,10);
  8.     roundedRect(ctx,53,119,49,16,6);
  9.     roundedRect(ctx,135,53,49,33,10);
  10.     roundedRect(ctx,135,119,25,49,10);

  11.     ctx.beginPath();
  12.     ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
  13.     ctx.lineTo(31,37);
  14.     ctx.fill();

  15.     for(var i=0;i
  16.       ctx.fillRect(51+i*16,35,4,4);
  17.     }

  18.     for(i=0;i
  19.       ctx.fillRect(115,51+i*16,4,4);
  20.     }

  21.     for(i=0;i
  22.       ctx.fillRect(51+i*16,99,4,4);
  23.     }

  24.     ctx.beginPath();
  25.     ctx.moveTo(83,116);
  26.     ctx.lineTo(83,102);
  27.     ctx.bezierCurveTo(83,94,89,88,97,88);
  28.     ctx.bezierCurveTo(105,88,111,94,111,102);
  29.     ctx.lineTo(111,116);
  30.     ctx.lineTo(106.333,111.333);
  31.     ctx.lineTo(101.666,116);
  32.     ctx.lineTo(97,111.333);
  33.     ctx.lineTo(92.333,116);
  34.     ctx.lineTo(87.666,111.333);
  35.     ctx.lineTo(83,116);
  36.     ctx.fill();

  37.     ctx.fillStyle = "white";
  38.     ctx.beginPath();
  39.     ctx.moveTo(91,96);
  40.     ctx.bezierCurveTo(88,96,87,99,87,101);
  41.     ctx.bezierCurveTo(87,103,88,106,91,106);
  42.     ctx.bezierCurveTo(94,106,95,103,95,101);
  43.     ctx.bezierCurveTo(95,99,94,96,91,96);
  44.     ctx.moveTo(103,96);
  45.     ctx.bezierCurveTo(100,96,99,99,99,101);
  46.     ctx.bezierCurveTo(99,103,100,106,103,106);
  47.     ctx.bezierCurveTo(106,106,107,103,107,101);
  48.     ctx.bezierCurveTo(107,99,106,96,103,96);
  49.     ctx.fill();

  50.     ctx.fillStyle = "black";
  51.     ctx.beginPath();
  52.     ctx.arc(101,102,2,0,Math.PI*2,true);
  53.     ctx.fill();

  54.     ctx.beginPath();
  55.     ctx.arc(89,102,2,0,Math.PI*2,true);
  56.     ctx.fill();
  57.   }
  58. }

  59. // A utility function to draw a rectangle with rounded corners.

  60. function roundedRect(ctx,x,y,width,height,radius){
  61.   ctx.beginPath();
  62.   ctx.moveTo(x,y+radius);
  63.   ctx.lineTo(x,y+height-radius);
  64.   ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  65.   ctx.lineTo(x+width-radius,y+height);
  66.   ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  67.   ctx.lineTo(x+width,y+radius);
  68.   ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  69.   ctx.lineTo(x+radius,y);
  70.   ctx.quadraticCurveTo(x,y,x,y+radius);
  71.   ctx.stroke();
  72. }               
复制代码

  本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/ziliaoku/ ... g/201507122217.html


相关标签:
ht
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!