Canvas 绘制点、路径

页面

<html>
    
    <body>
        <canvas id="canvas" width="800" height="800">
                <%--浏览器不支持canvas 标签--%>
        canvas>
    body>
html>

Js

获取画笔

function getCTX() {
    let c = document.getElementById("canvas");
    let ctx = c.getContext("2d");
    ctx.clearRect(0,0,c.width,c.height);
    return ctx;
}

画点示例

function drawPoint(point) {
    // 获取画笔
    let ctx = getCTX();
    
    // 设置绘制颜色
    ctx.fillStyle = "#0000FF";
    // 绘制成矩形
    ctx.fillRect(point.x - 2, point.y - 2, 4, 4);
    
    // 设置字体样式
    ctx.font = "16px bold 宋体";
    // 绘制文字
    ctx.fillText("(" + point.x + ", " + point.y + ")", point.x, point.y);
}

画路径(多条线)示例

function drawPath(path){
    ctx.beginPath();

    //如果颜色需要变更,必须先开始新的路径,否则全部的线颜色由最后一次设置的颜色决定
    ctx.strokeStyle = "#0000FF";
    for(var i = 0; i < path.length - 1; i++){
        drawLine(ctx, points[path[i]], points[path[i+1]]);
    }
}
/**
 * 画线
 */
function drawLine(ctx, a, b){
    ctx.moveTo(a.x, a.y);
    ctx.lineTo(b.x, b.y);
    ctx.stroke();
}

你可能感兴趣的:(前端)