HTML5 Canvas的常见线条特性值总结

日期:2020-10-11 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

线条特性简述
线条的特性共有下列4个:
1、lineCap特性
lineCap 界定左右文中线的节点,能够有下列 3 个值。

butt:默认设置值,节点是竖直于直线边沿的平直边沿。
round:节点是线上段边沿惩处线宽为直径的半圆。
square:节点是在选段边沿惩处线宽为长、以1半线宽为宽的矩形框。

2、 lineJoin特性
lineJoin 界定两条线交叉造成的拐角,可将其称为联接。在联接处建立1个填充3角形,可使用 lineJoin 设定它的基础特性。

miter:默认设置值,在联接处边沿增加相接。miterLimit 是角长和线宽所容许的最大占比(默认设置是 10)。
bevel:联接处是1个对角线斜角。
round:联接处是1个圆。

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


4、笔触款式
strokeStyle 界定线和样子边框的色调和款式。
后边两个前面早已说过了,这里大家侧重看来看前两个特性。
线条的帽子lineCap

空话很少说,立即上编码看实际效果。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  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?!赶紧换1个吧!!   
  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.   

运作結果:

这里我还做了两条平行线做1下参照,这样1眼就可以看清lineCap3个值的特性。但要留意,这个帽子只线上条的节点处起功效,哪怕是折点许多的折线,也仅仅是在刚开始和停止的两个节点带帽子。假如想更改线条折点(两个直线的联接处)的款式,那就要用到下面的lineJoin特性。
线条的联接lineJoin

空话很少说,立即上编码看实际效果。这段编码改自4⑶,只是设定了1下联接的特性。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  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?!赶紧换1个吧!!   
  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>  

运作結果:

看不清的童鞋自身变大网页页面或自身将编码的线宽调宽1点。
这里有1个很隐敝的特性,便是当lineJoin设定为miter时(默认设置),会解锁1个考试成绩,可使用miterLimit特性。
举个事例看看。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  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?!赶紧换1个吧!!   
  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>  

运作結果:

会发现,这个miterLimit要求了1个全自动填充联接点的极限值。假如超出了这个值,会致使lineJoin特性无效,会从 miter 变为 bevel。能够看出来,这个值和线宽和夹角相关,实际是啥关联。看下图。

能够看到,关联有点繁杂。有兴趣爱好的小伙子伴能够推导1下这个值与线宽、夹角的涵数关联。实际上,大多数情况下用不到这个掩藏特性,就算用到了也是凭觉得写个数随后不令人满意再调节便可。
高級直线绘图举例
具体在画布上绘图直线时,会有1些怪异的状况产生,这里结合本节课学到的两个直线的特性解读1个。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  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?!赶紧换1个吧!!   
  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>  

运作結果:

这 3 个直线和联接的案例有助于表明在画布上绘图直线时不一样特性的组成。
案例 1 尝试从画布左上角刚开始绘图,結果产生了1个怪异的状况。Canvas 相对路径在 x 轴和 y 轴方位上都绘图到了起始点的外侧。因为这个缘故案例 1 上面的线看起来要细些。此外,左上角水平一部分中圆形节点也没法看到,它们都被绘图到了显示屏以外的负值座标地区。另外,lineJoin 界定的对角线斜角也沒有绘出。
案例 2 调剂了事例 1 中出現的难题,将起止点离去左上角。这样就绘图出了详细的水平线,而且圆形 lineCap 和斜角 lineJoin 都被绘图出来了。
案例 3 显示信息了去掉 lineCap 设定后的默认设置节点实际效果,而且将 lineJoin 调剂为圆角。

上一篇:HTML5 画布canvas应用方式 返回下一篇:没有了