canvas02:使用canvas绘制一条直线

最新推荐文章于 2024-03-13 21:27:06 发布

原创最新推荐文章于 2024-03-13 21:27:06 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #前端

canvas 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何使用HTML5的Canvas API在网页上绘制直线，包括设置起始点、终点坐标、线宽、颜色，并通过示例代码展示整个绘制过程。

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

在canvas01中，我们创建了一个简单的canvas案例，现在我们在canvas中绘制一条直线。

步骤：

1.定义canvas工具

2.设置起始点坐标x,y （moveTo(x,y)）

3.移动到结束点x1,y1 （lineTo(x1,y1)）

4.设置直线宽度（strokeWidth = '5' 可选，默认1px）

5.设置直线颜色（strokeStyle = 'blue' 可选，默认黑色）

6.描边(stroke())

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    canvas {
        border: 1px #333 solid;
    }
</style>
<body>
    <!-- 1.定义一个画板 -->
    <canvas id="canvas01" width="300px" height="600px"></canvas>
</body>
</html>
<script>

    var myCanvas = document.getElementById('canvas01');

    var ctx = myCanvas.getContext('2d');
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.strokeWidth = 5;
    ctx.strokeStyle = 'red';
    // 描边
    ctx.stroke();
</script>