HTML canvas(画布)lineCap属性

• 

  lineCap属性定义和用法

  lineCap属性设置或返回线的端盖样式。 注意：值“round”和“square”使线条稍长。

• 

  lineCap属性浏览器支持

  Internet Explorer	Chrome	FireFox	Safari	Opera
  9.0（含）以上	支持	支持	支持	支持

• 

  lineCap属性语法

  context.lineCap="butt|round|square";

• 

  lineCap属性实例

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  
  ctx.beginPath();
  ctx.lineWidth = 10;
  ctx.lineCap = "butt";
  ctx.moveTo(20, 20);
  ctx.lineTo(200, 20);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.lineCap = "round";
  ctx.moveTo(20, 40);
  ctx.lineTo(200, 40);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.lineCap = "square";
  ctx.moveTo(20, 60);
  ctx.lineTo(200, 60);
  ctx.stroke();
  

  尝试一下
• 

  lineCap返回/属性值

  类型	描述
  butt	默认值。在这条线的每一端加一条平边
  round	线的每一端加一个圆的端盖
  square	在这条线的每一端加一个方形的端盖

• 

  lineCap属性相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布