canvas入门（四）

在开始新的一节之前我们先来复习回顾上一节的遗留问题

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.lineWidth = 6;
  context.strokeStyle = "green";
  context.fillStyle = "red";
  context.moveTo(60, 60);
  context.lineTo(60, 130);
  context.lineTo(130, 130);
  context.lineTo(130, 60);
  context.lineTo(60, 60);
  context.fill();
  context.stroke();
  context.closePath();
}
</script>

在运行这段代码后会出现最后的交点无法合拢的状况,解决方法一,去掉context.lineTo(60, 60);并将stroke,fill移动至closePath之后

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.lineWidth = 6;
  context.strokeStyle = "green";
  context.fillStyle = "red";
  context.moveTo(60, 60);
  context.lineTo(60, 130);
  context.lineTo(130, 130);
  context.lineTo(130, 60);
  context.closePath();
  context.stroke();
  context.fill();
}
</script>

这样做是因为closePath会将未绘制结束的起点与终点自动连接,解决方法二,设置lineCap

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.lineWidth = 6;
  context.strokeStyle = "green";
  context.fillStyle = "red";
  context.lineCap = 'square';
  context.moveTo(60, 60);
  context.lineTo(60, 130);
  context.lineTo(130, 130);
  context.lineTo(130, 60);
  context.lineTo(60, 60);
  context.stroke();
  context.fill();
  context.closePath();
}
</script>

设置lineCap有三个值’butt’默认值,'round’每个末端添加圆形线帽,'square’向线条的每个末端添加正方形线帽。当lineCap设置为’round’小伙伴有没有发现只有起点与终点的连接处是圆角,而线段的其他连接处仍是正方角。
这时canvas又引入了lineJoin

<script type="text/javascript">
window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var context = canvas.getContext("2d");
  context.beginPath();
  context.lineWidth = 10;
  context.strokeStyle = "green";
  context.fillStyle = "red";
  context.lineCap = 'round';
  context.lineJoin = 'round';
  context.moveTo(60, 60);
  context.lineTo(60, 130);
  context.lineTo(130, 130);
  context.lineTo(130, 60);
  context.lineTo(60, 60);
  context.stroke();
  context.fill();
  context.closePath();
}
</script>

lineJoin—bevel创建斜角。round创建圆角。miter默认。创建尖角。

上一节中fill与stroke的先后顺序渲染出现不同结果的问题将在下节中讲解

猜你喜欢