Canvas 线条末端样式 lineCap

绘制线条时,线条起始和终点的默认演示是平齐的一条线,当然我们可以通过属性 lineCap 改变它

Canvas 提供了三种线条末端样式,分别是 buttroundsquare

它们的表现如下图

最左边的线用了默认的 butt 。可以注意到它是与辅助线齐平的

中间的是 round 的效果,端点处加上了半径为一半线宽的半圆

右边的是 square 的效果,端点处加上了等宽且高度为一半线宽的方块

Canvas lineCap 属性

属性 lineCap 用户设置如何绘制每一条线段末端的属性

有3个可能的值,分别是:butt, round and square。默认值是 butt

语法

ctx.lineCap = "butt";
ctx.lineCap = "round";
ctx.lineCap = "square";

值说明

说明
butt 线段末端以方形结束
round 线段末端以圆形结束
square 线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域

范例

下面的代码使用 lineCap 属性绘制以圆形结尾的线段

<!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.beginPath();
ctx.moveTo(50,50);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 50);
ctx.stroke();
</script>

运行结果如下


范例 2

下面的代码绘制了3条线段, 每条线段都设置了不同的 lineCap 属性值

通过 2 条辅助线能够精确地看到 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 lineCap = ['butt','round','square'];

// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(140,10);
ctx.moveTo(10,140);
ctx.lineTo(140,140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = 'black';
for (var i = 0; i < lineCap.length; i++) {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap[i];
  ctx.beginPath();
  ctx.moveTo(25+i*50,10);
  ctx.lineTo(25+i*50,140);
  ctx.stroke();
}
</script>

运行结果如下


Canvas 基础教程

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

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

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