如何使用canvas画连续的线段

最新推荐文章于 2024-09-24 22:10:23 发布

茫然之大定

最新推荐文章于 2024-09-24 22:10:23 发布

阅读量4.3k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/In_computer/article/details/51855287

版权

这篇博客介绍了如何在canvas上画出连续线段，首先展示了效果，然后讲解了HTML和JS代码实现细节，包括如何获取鼠标点击的精确位置并修正滚动条偏移，最后鼓励读者提出指正和讨论。

摘要由CSDN通过智能技术生成

我们先看一下效果图

用canvas画连续的线段。首先要明白canvas是怎么用的，这里画直线主要用到了以下几个接口：
- ctx.
-canvas = document.getElementById(“myCanvas”) ：获取对应的CanvasRenderingContext2D对象(画笔)
- ctx = canvas.getContext(“2d”) ：getContext()指定了参数2d这里表示绘制2d图形
- ctx.beginPath()：开始绘制一个路径
- ctx.strokeStyle = “red”：确定画出路径的颜
- ctx.moveTo(a, b):绘制起点坐标，坐标为（a,b）
- ctx.lineTo(a, b)：绘制终点目标，坐标为（a，b）
- ctx.stroke()：进行整个线段的着色，这个时候线段才可见（注意必须在关闭路径前着色）
- ctx.closePath()：关闭绘制路径

更多的canvas知识可以参考网址简书 HTML5 Canvas 学习和canvas API学习

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
    <title>full-screen</title>
    <