Canvas入门实例02：简单的直线

最新推荐文章于 2025-08-02 12:20:59 发布

原创最新推荐文章于 2025-08-02 12:20:59 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

Canvas 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Canvas上下文的基本path操作，包括如何使用beginPath()、moveTo()、lineTo()、strokeStyle和lineWidth来绘制直线，并详细解释了lineCap属性的不同值以及它们的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文示例canvas最基本的path操作：画一条直线。

function drawScreen(){
  var context = theCanvas.getContext('2d');
  
  context.strokeStyle = '#000000';
  context.lineWidth = 10;
  context.lineCap = 'square';
  context.beginPath();
  context.moveTo(20, 0);
  context.lineTo(100, 0);
  context.stroke();
  context.closePath();
}

1) 每个Canvas上下文仅有一个当前path；

2) 通过beginPath()方法开始一个path，closePath()方法结束一个path;

3) path有两个最基本的方法: moveTo() 、lineTo();

4) lineCap属性有三个值：

butt: (默认)边缘是平的，与当前线条垂直。

round: 边缘是个半圆，该半圆的直径是当前线条的长度。

square: 边缘是长方形，该长方形的长是当前线条的宽度，宽是当前线条的宽度的一半。

5) lineWidth属性用来设置线条的宽度(ps:目前Chrome下奇数宽度渲染效果会有些模糊)

6) strokeStyle属性定义当前线条的颜色及样式。