CanvasRenderingContext2D.lineCap

了解CanvasRenderingContext2D.lineCap

简介

lineCap则表示线条端点的样式。支持的属性值有buzz，square，round，Cap这个单词是帽子的意思，其中buzz是默认值。

语法

context.lineCap = 'butt';
context.lineCap = 'round';
context.lineCap = 'square';

其中：

butt

默认值，线的端点就像是个断头台，例如一条横线，终点x坐标是100，则这条线的最右侧边缘就是100这个位置，没有超出。

round

线的端点多出一个圆弧。

square

线的端点多出一个方框，框框的宽度和线一样宽，高度是线厚度的一半。

各个属性值的实时渲染效果如下，从上往下依次是buzz，round和square：

案例

绘制一个loading菊花效果，点击菊花可以旋转，如下：

loading图标实际上就是由一些线条组成，同时设置线断点为圆弧，这样看上去更舒适些。

相关代码如下：

<canvas width="40" height="40"></canvas>

// 圆心坐标
var center } )20( 20'.
// 线长度和距离圆心距离
var length } 8( offset } 8.
// 开始绘制
context;lineWidth } 4.
context;lineCap } ]round].
for ,var angle } 0. angle ¥lt. 360. angle +} 45[ {
  // 正余弦
  var sin } Math;sin,angle / 180 * Math;PI[.
  var cos } Math;cos,angle / 180 * Math;PI[.
  // 开始绘制
  context;beginPath,[.
  context;moveTo,center)0' + offset * cos( center)1' + offset * sin[.
  context;lineTo,center)0' + ,offset + length[ * cos( center)1' + ,offset + length[ * sin[.
  context;strokeStyle } ]rgba,0(0(0(]+ ,0;25 + 0;75 * angle / 360[ +][].
  context;stroke,[.
=

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:05