网页制作

HTML5 Canvas的常用线条属性值总结
网页制作 2024/12/23 佚名
3 2

线条属性概述
线条的属性共有以下四个：
1、lineCap属性
lineCap 定义上下文中线的端点，可以有以下 3 个值。

butt：默认值，端点是垂直于线段边缘的平直边缘。
round：端点是在线段边缘处以线宽为直径的半圆。
square：端点是在选段边缘处以线宽为长、以一半线宽为宽的矩形。

2、 lineJoin属性
lineJoin 定义两条线相交产生的拐角，可将其称为连接。在连接处创建一个填充三角形，可以使用 lineJoin 设置它的基本属性。

miter：默认值，在连接处边缘延长相接。miterLimit 是角长和线宽所允许的最大比例(默认是 10)。
bevel：连接处是一个对角线斜角。
round：连接处是一个圆。

3、线宽
lineWidth 定义线的宽度(默认值为 1.0)。


4、笔触样式
strokeStyle 定义线和形状边框的颜色和样式。
后面两个前面已经说过了，这里我们着重来看看前两个属性。
线条的帽子lineCap

废话不多说，直接上代码看效果。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>线条的帽子</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.lineWidth = 50;   
  22.         context.strokeStyle = "#1BAAAA";   
  23.   
  24.         context.beginPath();   
  25.         context.moveTo(100,100);   
  26.         context.lineTo(700,100);   
  27.         context.lineCap = "butt";   
  28.         context.stroke();   
  29.   
  30.         context.beginPath();   
  31.         context.moveTo(100,300);   
  32.         context.lineTo(700,300);   
  33.         context.lineCap = "round";   
  34.         context.stroke();   
  35.   
  36.         context.beginPath();   
  37.         context.moveTo(100,500);   
  38.         context.lineTo(700,500);   
  39.         context.lineCap = "square";   
  40.         context.stroke();   
  41.   
  42.         //下面画两个基准线方便观察   
  43.         context.lineWidth = 3;   
  44.         context.strokeStyle = "black";   
  45.   
  46.         context.beginPath();   
  47.         context.moveTo(100,0);   
  48.         context.lineTo(100,600);   
  49.         context.moveTo(700,0);   
  50.         context.lineTo(700,600);   
  51.         context.stroke();   
  52.     }   
  53. </script>   
  54. </body>   
  55. </html>   
  56.   

运行结果：
HTML5 Canvas的常用线条属性值总结

这里我还做了两条平行线做一下参考，这样一眼就能看清lineCap三个值的特点。但要注意，这个帽子只在线条的端点处起作用，哪怕是折点很多的折线，也仅仅是在开始和终止的两个端点带帽子。如果想改变线条折点(两个线段的连接处)的样式，那就要用到下面的lineJoin属性。
线条的连接lineJoin

废话不多说，直接上代码看效果。这段代码改自4-3，只是设置了一下连接的属性。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>线条的连接</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.beginPath();   
  22.         context.moveTo(100,100);   
  23.         context.lineTo(300,300);   
  24.         context.lineTo(100,500);   
  25.         context.lineJoin = "miter";   
  26.         context.lineWidth = 20;   
  27.         context.strokeStyle = "red";   
  28.         context.stroke();   
  29.   
  30.         context.beginPath();   
  31.         context.moveTo(300,100);   
  32.         context.lineTo(500,300);   
  33.         context.lineTo(300,500);   
  34.         context.lineJoin = "bevel";   
  35.         context.lineWidth = 20;   
  36.         context.strokeStyle = "blue";   
  37.         context.stroke();   
  38.   
  39.         context.beginPath();   
  40.         context.moveTo(500,100);   
  41.         context.lineTo(700,300);   
  42.         context.lineTo(500,500);   
  43.         context.lineJoin = "round";   
  44.         context.lineWidth = 20;   
  45.         context.strokeStyle = "black";   
  46.         context.stroke();   
  47.     }   
  48. </script>   
  49. </body>   
  50. </html>  

运行结果：
HTML5 Canvas的常用线条属性值总结

看不清的童鞋自己放大网页或者自己将代码的线宽调宽一点。
这里有一个很隐蔽的属性，就是当lineJoin设置为miter时（默认），会解锁一个成绩，可以使用miterLimit属性。
举个例子看看。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>miterLimit</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.beginPath();   
  22.         context.moveTo(100,100);   
  23.         context.lineTo(300,300);   
  24.         context.lineTo(100,500);   
  25.         context.lineJoin = "miter";   
  26.         context.miterLimit = 10;   
  27.         context.lineWidth = 5;   
  28.         context.strokeStyle = "red";   
  29.         context.stroke();   
  30.   
  31.         context.beginPath();   
  32.         context.moveTo(300,200);   
  33.         context.lineTo(500,300);   
  34.         context.lineTo(300,400);   
  35.         context.lineJoin = "miter";   
  36.         context.miterLimit = 10;   
  37.         context.lineWidth = 5;   
  38.         context.strokeStyle = "blue";   
  39.         context.stroke();   
  40.   
  41.         context.beginPath();   
  42.         context.moveTo(500,290);   
  43.         context.lineTo(700,300);   
  44.         context.lineTo(500,310);   
  45.         context.lineJoin = "miter";   
  46.         context.miterLimit = 10;   
  47.         context.lineWidth = 5;   
  48.         context.strokeStyle = "black";   
  49.         context.stroke();   
  50.     }   
  51. </script>   
  52. </body>   
  53. </html>  

运行结果：
HTML5 Canvas的常用线条属性值总结

会发现，这个miterLimit规定了一个自动填充连接点的极限值。如果超过了这个值，会导致lineJoin属性失效，会从 miter 变成 bevel。可以看出来，这个值和线宽以及夹角有关，具体是啥关系。看下图。
HTML5 Canvas的常用线条属性值总结

可以看到，关系有点复杂。有兴趣的小伙伴可以推导一下这个值与线宽、夹角的函数关系。其实，大多时候用不到这个隐藏属性，即便用到了也是凭感觉写个数然后不满意再调试即可。
高级线段绘制举例
实际在画布上绘制线段时，会有一些奇怪的现象发生，这里融合本节课学到的两个线段的属性讲解一个。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>miterLimit</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         // 实例1: 圆形端点,斜角连接,在画布左上角   
  22.         context.beginPath();   
  23.         context.moveTo(0,0);   
  24.         context.lineTo(180,0);   
  25.         context.lineTo(180,180);   
  26.         context.lineJoin = 'bevel';   
  27.         context.lineCap = 'round';   
  28.         context.lineWidth = 10;   
  29.         context.strokeStyle = "red";   
  30.         context.stroke();   
  31.   
  32.         // 实例2: 圆形端点,斜角连接,不在画布左上角   
  33.         context.beginPath();   
  34.         context.moveTo(300,200);   
  35.         context.lineTo(480,200);   
  36.         context.lineTo(480,380);   
  37.         context.lineJoin = 'bevel';   
  38.         context.lineCap = 'round';   
  39.         context.lineWidth = 10;   
  40.         context.strokeStyle = "blue";   
  41.         context.stroke();   
  42.   
  43.         // 实例3: 平直端点,圆形连接,不在画布左上角   
  44.         context.beginPath();   
  45.         context.moveTo(600,400);   
  46.         context.lineTo(780,400);   
  47.         context.lineTo(780,580);   
  48.         context.lineJoin = 'round';   
  49.         context.lineCap = 'butt';   
  50.         context.lineWidth = 10;   
  51.         context.strokeStyle = "black";   
  52.         context.stroke();   
  53.     }   
  54. </script>   
  55. </body>   
  56. </html>  

运行结果：
HTML5 Canvas的常用线条属性值总结

这 3 个线段和连接的实例有助于说明在画布上绘制线段时不同属性的组合。
实例 1 尝试从画布左上角开始绘制，结果发生了一个奇怪的现象。Canvas 路径在 x 轴和 y 轴方向上都绘制到了起点的外侧。由于这个原因实例 1 上面的线看起来要细些。另外，左上角水平部分中圆形端点也无法看到，它们都被绘制到了屏幕之外的负值坐标区域。此外，lineJoin 定义的对角线斜角也没有绘出。
实例 2 调整了例子 1 中出现的问题,将起始点离开左上角。这样就绘制出了完整的水平线,并且圆形 lineCap 和斜角 lineJoin 都被绘制出来了。
实例 3 显示了去掉 lineCap 设置后的默认端点效果,并且将 lineJoin 调整为圆角。

标签：
HTML5,Canvas
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“HTML5 Canvas的常用线条属性值总结”

暂无“HTML5 Canvas的常用线条属性值总结”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com