Canvas 画直线

最新推荐文章于 2024-08-02 20:11:41 发布

稻田里展望者

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量896

点赞数

分类专栏： Web前端技术文章标签： html JavaScript canvas

本文链接：https://blog.csdn.net/weixin_46441425/article/details/123888208

版权

Web前端技术专栏收录该内容

86 篇文章 3 订阅

订阅专栏

如何在canvas中画一条直线, canvas的基本用法

步骤:

获取画布
获取画布的上下文
开启一条路径
确定起始点
确定结束点
着色
结束路径

代码示例

html部分, 声明一个canvas标签

<body>
	<canvas id="canvas" width="1000px" height="1000px"></canvas>
</body>

Javascript部分代码

<script>
    // 1. 获取画布
    let canvas = document.getElementById('canvas');
    // 2. 获取画布的上下文
    let ctx = canvas.getContext('2d');
    // 3. 开启一条路径
    ctx.beginPath();
    // 4. 确定起始点
    ctx.moveTo(100, 100);
    // 5. 确定结束点
    ctx.lineTo(800, 800);
    // 6. 着色
    ctx.stroke();
    // 7. 结束路径
    ctx.closePath();
</script>