02-01直线图形-直线

绘制直线

画一条直线的步骤

1. moveTo(x,y) 移动到某一个起点
2. lineTo(x,y) 确定直线的终点
3. stroke() 画线

<canvas id="canvas02-01" width="200"></canvas>

window.onload = function() {
    const cnv = document.getElementById('canvas02-01');
    const cxt = cnv.getContext('2d');

    cxt.moveTo(50, 100);
    cxt.lineTo(150, 50);
    cxt.stroke();
}

多条直线的绘制

使用moveTo和lineTo就可以对直线进行多条绘制。

绘制不连贯的线

步骤

• moveTo(50, 50)
• lineTo(50, 100)
• moveTo(100, 50)
• lineTo(100, 100)

<canvas id="canvas02-02" width="200"></canvas>

const cnv = $$('canvas02-02');
const cxt = cnv.getContext('2d');

cxt.moveTo(50, 50);
cxt.lineTo(50, 100);
cxt.moveTo(100, 50);
cxt.lineTo(100, 100);
cxt.stroke();

效果图：

绘制连贯的线

步骤

• moveTo(50, 50)
• lineTo(50, 100)
• moveTo(100, 50)
• lineTo(100, 100)

<canvas id="canvas02-03" width="200"></canvas>

const cnv = $$('canvas02-03');
const cxt = cnv.getContext('2d');

cxt.moveTo(50, 50);
cxt.lineTo(50, 100);
cxt.lineTo(100, 50);
cxt.lineTo(100, 100);
cxt.stroke();

效果图：