实例：直线图形-直线 案例

绘制三角形

步骤

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

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

const cnv = $$('canvas03-01');
const cxt = cnv.getContext('2d');

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

效果图：

绘制矩形

步骤

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

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

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

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

效果图：

绘制箭头

步骤

• cxt.moveTo(40, 60);
• cxt.lineTo(100, 60);
• cxt.lineTo(100, 30);
• cxt.lineTo(150, 75);
• cxt.lineTo(100, 120);
• cxt.lineTo(100, 90);
• cxt.lineTo(40, 90);
• cxt.lineTo(40, 60);
• cxt.stroke();

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

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

cxt.moveTo(40, 60);
cxt.lineTo(100, 60);
cxt.lineTo(100, 30);
cxt.lineTo(150, 75);
cxt.lineTo(100, 120);
cxt.lineTo(100, 90);
cxt.lineTo(40, 90);
cxt.lineTo(40, 60);
cxt.stroke();

效果图：

正多边形的绘制

需要封装一个方法，传入绘制参数就可以直接绘制

createPolygon(cxt, n, dx, dy, size)

参数说明

• cxt是绘制上下文
• n是边数
• dx和dy是中心点坐标
• size是外接圆的半径大小

绘制

<canvas id="canvas03-04" width="200"></canvas>

function createPolygon(cxt, n, dx, dy, size) {
    cxt.beginPath()
    const degree = (2 * Math.PI) / n;
    for(let i = 0; i < n; i++) {
        const x = Math.cos(i * degree);
        const y = Math.sin(i * degree);
        cxt.lineTo(x * size + dx, y * size + dy);
    }
    cxt.closePath()
}

window.onload = function() {
    const cnv = $$('canvas03-04');
    const cxt = cnv.getContext('2d');

    createPolygon(cxt, 3, 100, 75, 50);
    cxt.fillStyle = 'hotpink';
    cxt.fill();
}

效果图：

五角星的绘制

需要封装一个方法，传入绘制参数就可以直接绘制

createStar(cxt, dx, dy, size)

参数说明

• cxt是绘制上下文
• dx和dy是中心点坐标
• size是外接圆的半径大小

绘制

<canvas id="canvas03-05" width="200"></canvas>

function createStar(cxt, dx, dy, size) {
    cxt.beginPath()
    for(let i = 0; i < 5; i++) {
        const x = Math.cos((18 + i * 72) * Math.PI / 180);
        const y = -Math.sin((18 + i * 72) * Math.PI / 180);
        cxt.lineTo(x * size + dx, y * size + dy);
        const x1 = Math.cos((54 + i * 72) * Math.PI / 180);
        const y1 = -Math.sin((54 + i * 72) * Math.PI / 180);
        cxt.lineTo(x1 * size / 2 + dx, y1 * size / 2 + dy);
    }
    cxt.closePath()
}

window.onload = function() {
    const cnv = $$('canvas03-05');
    const cxt = cnv.getContext('2d');

    createStar(cxt, 100, 75, 50);
    cxt.fillStyle = 'hotpink';
    cxt.fill();
}

效果图：