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. WPF/C#：显示分组数据的两种方式

    前言 本文介绍自己在遇到WPF对数据进行分组显示的需求时,可以选择的两种方案.一种方案基于ICollectionView,另一种方案基于IGrouping. 基于ICollectionView实现 相 ...

  2. Playbook条件语句

    目录 Playbook条件语句 1. when的基本使用 1.1 when的基本示例 1.2比较运算符 1.3 比较运算符示例 1.4 逻辑运算符 1.5 逻辑运算符示例 2. 条件判断与block ...

  3. mysql的varchar和oracle的varchar2比较

    首先说结论: 1.mysql存储的是字符数(不分语言) 2.oracle存储的需要看定义,如果定义为varchar2(n),则默认是n个字节,如果是varchar2(n char)则是n个字节. 3. ...

  4. 在Linux驱动中使用proc子系统

    在Linux驱动中使用proc子系统 背景 proc文件系统是个简单有用的东东:驱动创建一个proc虚拟文件,应用层通过读写该文件,即可实现与内核的交互. 本文适用于3.10以后的内核,v3.10以前 ...

  5. .net core 3.1 + 动态执行C#

    1.使用 using Microsoft.CodeAnalysis.CSharp.Scripting;using Microsoft.CodeAnalysis.Scripting; 2.定义 Rosl ...

  6. 嵌入式HLS 案例开发步骤分享——基于Zynq-7010/20工业开发板（1）

    目 录 前 言 3 1 HLS 开发流程说明 5 1.1 HLS 工程导入 5 1.2 编译与仿真 6 1.3 综合 8 1.4 IP 核封装 10 1.5 IP 核测试 14 前 言 本文主要介绍 ...

  7. Linux 应用案例开发手册——基于Zynq-7010/20工业开发板

    目 录 1 开发案例说明 4 2 Linux 常用开发案例 4 2.1 tl_led_flash 案例 4 2.2 tl_key_test 案例 7 2.3 tl_can_echo 案例 11 2.4 ...

  8. 【ClickHouse】6：clickhouse集群高可用

    背景介绍: 有四台CentOS7服务器安装了ClickHouse HostName IP 安装程序 程序端口 shard(分片) replica(备份) centf8118.sharding1.db ...

  9. SpringBoot可视化接口开发工具magic-api

    magic-api简介 magic-api是一个基于Java的接口快速开发框架,编写接口将通过magic-api提供的UI界面完成,自动映射为HTTP接口,无需定义Controller.Service ...

  10. SpringBoot集成日志框架

    springboot默认日志是打印在console中,不会保存在文件中.我们项目上线肯定要保存日志用于分析问题的. 使用xml配置日志保存 并不需要pom配置slf4j依赖,starter里面已经配置 ...