如何使用canvas画连续的线段

这篇博客介绍了如何在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>
    <
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值