Canvas 线条与线条间接合处的样式

多次调用 lineTo() 方法绘制多个线条组成路径时,我们会发现线条与线条之间接合处的样式有时候不一样

Canvas 把这个接合处的样式称之为 lineJoin 并提供了 lineJoin 属性用于设置它

lineJoin 属性

ctx.lineJoin 是用来设置 2 个长度不为 0 的相连部分 ( 线段,圆弧,曲线 ) 如何连接在一起的属性

长度为 0 的变形部分,其指定的末端和控制点在同一位置,会被忽略

语法

ctx.lineJoin = "bevel";
ctx.lineJoin = "round";
ctx.lineJoin = "miter";
说明
round 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状,圆角的半径是线段的宽度
bevel 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角
miter 默认,通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域
这个设置可以通过 miterLimit 属性设置

注意

如果 2 个相连部分在同一方向,那么 lineJoin 不会产生任何效果,因为在那种情况下不会出现连接区域

范例

下面的代码使用 lineJoin 属性设置线段连接处的样式

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.lineWidth = 10;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(200, 100);
ctx.lineTo(250,10);
ctx.stroke();
</script>

运行结果如下


范例 2

我们可以使用 for 循环绘制了 3 条不同的路径,演示 lineJoin 属性 3 种不同的设置

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="300" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");

var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;

for (var i = 0; i < lineJoin.length; i++) {
  ctx.lineJoin = lineJoin[i];
  ctx.beginPath();
  ctx.moveTo(50,50+i*40);
  ctx.lineTo(25,45+i*40);
  ctx.lineTo(75,10+i*40);
  ctx.lineTo(115,45+i*40);
  ctx.lineTo(155,10+i*40);
  ctx.stroke();
}
</script>

运行结果如下


Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.