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. Java基础：throw和throws的详解

    总结来说,throw是用来抛出一个具体的异常实例,而throws是用来声明方法可能会抛出哪些类型的异常,是对调用者的一种通知和要求. 1. throw 作用: throw关键字用于在方法体内实际抛出一 ...

  2. injectionIII iOS代码注入工具（下）

    injectionIII iOS代码注入工具(下) 本文将解决如何使用injectionIII对主页热重载,如果对injectionIII不了解的同学请回到上篇查看 Vaccine 简单地说Vacci ...

  3. Linux驱动：使用workqueue、tasklet处理中断

    Linux驱动:使用workqueue.tasklet处理中断 背景 中断服务程序一般都是在中断请求关闭的条件下执行的,以避免嵌套而使中断控制复杂化.但是,中断是一个随机事件,它随时会到来,如果关中断 ...

  4. 一招解决github访问慢的问题

    ​ 之前我在网上搜过解决办法,其中一个是修改 hosts 文件,但是效果不太理想.我在这里给大家推荐github上的一个开源项目:FastGithub .用了这个之后,效果就比较理想了,次次都能访问到 ...

  5. 题解：洛谷 P1165 日志分析

    标签:栈,模拟 题意 对于一个栈,给定三种操作: 0 x,将 \(x\) 入栈: 1,出栈,栈空时忽略: 2,查询当前栈内最大值. 思路 前两个都是栈的基本操作,关键在于查最大值. 每次询问暴力找肯定 ...

  6. 免费领 | 2000件“直击灵魂”的Polo衫，创龙科技10周年献礼！

          一件"有灵魂"的Polo衫 时光荏苒,创龙科技即将迎来10周年庆!为感谢各位客户多年的支持与信任,创龙科技特推出10周年献礼活动--2000件"直击灵魂&qu ...

  7. 【Hive报错】在hue上执行自定义的hive函数报错 Error while compiling statement:FAILED:SemanticException [Error 10011]: Invalid function default.sqlServerdes

    在 Hive客户端中使用自定义创建UDF函数时,报"ERROR 10011","invalid function"的异常: 在Hive上自定义创建了一个函数,在 ...

  8. truncate table 与delete的区别

    1.DELETE ・DML语言 ・可以回退 ・可以有条件的删除 DELETE FROM 表名 WHERE 条件2.TRUNCATE TABLE ・DDL语言 ・无法回退 ・默认所有的表内容都删除 ・删 ...

  9. Session的默认保存路径

    在php.ini里的配置session.save_path是注释掉的,那么Seesion保存的路径在不同类型操作系统保存在什么位置? Linux:/tmp 或 /var/lib/php/session ...

  10. [oeasy]python0028_直接运行_修改py文件执行权限_设置py文件打开方式

    ​ 直接运行 回忆上次内容 我们把两个程序整合起来了 可以持续输出当前时间 每秒都更新 ​ 编辑 但是我想在 shell 里面 只输入文件名(./sleep.py)并回车 就能不断输出时间 可能吗? ...