Canvas 绘制点、路径

最新推荐文章于 2024-04-08 20:58:26 发布

耀世天尊

最新推荐文章于 2024-04-08 20:58:26 发布

阅读量2.3w

点赞数 4

分类专栏：前端文章标签： canvas js

本文链接：https://blog.youkuaiyun.com/qq_34461514/article/details/79373058

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素进行基本的绘图操作，包括画点、画线及绘制路径等。通过JavaScript代码实现图形的绘制，并展示了如何设置颜色和字体样式。

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

页面

<html>
    <!--Canvas 的宽高要在页面中设置，css 或 js 中设置的宽高不正常-->
    <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();
}