1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>07-Canvas虚线</title>

 6     <style>

 7         *{

 8             margin: 0px;

 9             padding: 0;

10         }

11         canvas{

12             display: block;

13             margin: 0 auto;

14             background: red;

15         }

16     </style>

17 </head>

18 <body>

19 <canvas width="500" height="500"></canvas>

20 <script>

21     let oCanvas = document.querySelector("canvas");

22     let oCtx = oCanvas.getContext("2d");

23     oCtx.moveTo(100, 100);

24     oCtx.lineTo(400, 100);

25     oCtx.lineWidth = 20;

26     oCtx.strokeStyle = "blue";

27     // oCtx.setLineDash([5, 20]);

28     oCtx.setLineDash([5, 10, 20]);

29     // console.log(oCtx.getLineDash());

30     oCtx.lineDashOffset = -50;

31     oCtx.stroke();

32     /*

33     1.setLineDash

34     [5,10] 数组是用来描述你的排列方式的

35

36     2.getLineDash

37     获取虚线的排列方式 获取的是不重复的那一段的排列方式

38

39     3.lineDashOffset

40     设置虚线的偏移位

41     * */

42

43 </script>

44 </body>

45 </html>

07-canvas绘制虚线的更多相关文章

  1. canvas绘制虚线图表

    最近有读者加我微信咨询这个问题,如下图所示: 要实现的效果如下: 其实难度不大,但是考虑一些人员对于canvas不熟悉,还是简单的介绍下. 其实该图表,就是一个圆圈外面在套一个圆弧的效果, 主要的难点 ...

  2. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  3. canvas学习总结三：绘制虚线

    上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...

  4. canvas学习总结四：绘制虚线

    上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...

  5. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  6. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  7. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  10. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

随机推荐

  1. CF1523D Love-Hate

    抽象化题意: 一共有 \(m\) 个元素,给定 \(n\) 个集合,每个集合的元素不超过 \(15\) 个,求出一个元素个数最多的集合 \(S\) 是至少 \(\lceil \dfrac{n}{2} ...

  2. 从零开始学Spring Boot系列-集成Spring Security实现用户认证与授权

    在Web应用程序中,安全性是一个至关重要的方面.Spring Security是Spring框架的一个子项目,用于提供安全访问控制的功能.通过集成Spring Security,我们可以轻松实现用户认 ...

  3. 数据源dataSource以及事务tx的xml文件配置方式及代码配置方式

    所需要使用的依赖 <dependencies> <!--spring jdbc Spring 持久化层支持jar包--> <dependency> <grou ...

  4. vue项目的简单创建与插件下载

    准备工作 安装node.js 安装node.js过程全部采用默认配置,一步一步next即可 检验node.js是否安装成功:在cmd命令行中输入node -v以及npm -v 通过cmd创建 安装vu ...

  5. PowerBuilder现代编程方法X11：PB程序完全跨平台方案

    PB可能要支持Windows.macOS.Linux.iOS.Android与鸿蒙操作系统和X86.ARM.RISC-V与国产龙芯CPU的原生应用了! PowerBuilder现代编程方法X11:PB ...

  6. UE5 射线检测排除隐藏的Actor

    0x00 Unreal Engine 5(UE5)以其卓越的性能和直观的开发工具在游戏开发领域占据了重要地位.本系列将深入探讨UE5中射线检测的关键概念,着重介绍处理隐藏Actor的技巧. 0x01. ...

  7. ERP中内部批号和外部批号分别指的是什么

    在企业资源计划(ERP)系统中,内部批号和外部批号是两个用于标识和跟踪产品的关键概念.它们通常用于管理和追踪生产.库存和供应链中的物料. 内部批号(Internal Batch Number): 定义 ...

  8. 浅析JS构造函数

    构造函数(Constructor Function)是 JavaScript 中创建对象的一种重要方式,它不仅让我们能够创建具有相似属性和方法的对象,还能充分利用 JavaScript 的原型继承机制 ...

  9. 玄机-第二章日志分析-mysql应急响应

    目录 前言 简介 应急开始 准备工作 日志分析 步骤 1 步骤 2 步骤 3 步骤 4 总结 补充mysql中的/var/log/mysql/erro.log 记录上传文件信息的原因 前言 这里应急需 ...

  10. Pandas库学习笔记（2）

    Pandas 数据结构 Pandas 有三种常用的数据结构 Series DataFrame Panel 这些数据结构建立在Numpy数组之上,这意味着它们运行速度都非常快. Python.Numpy ...