04-使用canvas绘制直线

四喜花露水

已于 2024-12-25 11:32:32 修改

阅读量199

点赞数 1

分类专栏： Canvas 文章标签： javascript 前端

于 2024-12-25 10:23:52 首次发布

本文链接：https://blog.csdn.net/gaowxx/article/details/144711516

版权

Canvas 专栏收录该内容

31 篇文章

订阅专栏

04-使用canvas绘制直线_哔哩哔哩_bilibili04-使用canvas绘制直线是一次性学会 Canvas 动画绘图（核心精讲+50个案例）2023最新教程的第5集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.player.switch&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=5

使用Canvas画直线分为下面的步骤：

使用moveTo方法把画笔移动到直线起点
使用lineTo方法把画笔移动到直线终点
使用stroke方法让画笔绘制线条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>
    // 1.创建canvas标签
    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    document.body.append(canvas)
    // 2.得到context对象
    const context = canvas.getContext('2d')
    // 3.画直线
    // 3.1 起点
    context.moveTo(100,100)
    // 3.2 终点
    context.lineTo(300, 100)
    // 3.3 调用画线的方法
    context.stroke()

</script>

</html>