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. 硬件开发笔记（二十一）：外部搜索不到的元器件封装可尝试使用AD21软件的“ManufacturerPart Search”功能

    前言   这是一个AD的一个强大的新功能,能招到元器件的原理图.3D模型还有价格厂家,但是不一定都有,有了也不一定有其3D模型. ManufacturerPart Search 在设计工具中选择即用型 ...

  2. Android Verified Boot 2.0 AVB详解（基于Android P）

    原文地址:https://android.googlesource.com/platform/external/avb/+/master/ 译文地址:https://blog.csdn.net/sha ...

  3. C#的多线程UI窗体控件显示方案 - 开源研究系列文章

    上次编写了<LUAgent服务器端工具>这个应用,然后里面需要新启动一个线程去对文件进行上传到FTP服务器,但是新线程里无法对应用主线程UI的内容进行更改,所以就需要在线程里设置主UI线程 ...

  4. 适用于PyTorch 2.0.0的Ubuntu 22.04上CUDA v11.8和cuDNN 8.7安装指南

    将下面内容保存为install.bash,直接用shell执行一把梭解决 #!/bin/bash ### steps #### # verify the system has a cuda-capab ...

  5. K8S 中的 CRI、OCI、CRI shim、containerd

    哈喽大家好,我是咸鱼. 好久没发文了,最近这段时间都在学 K8S.不知道大家是不是和咸鱼一样,刚开始学 K8S.Docker 的时候,往往被 CRI.OCI.CRI shim.containerd 这 ...

  6. leetcode简单(矩阵)：[566, 766, 832, 867, 999, 1030, 1261, 1275, 1337, 1351]

    目录 566. 重塑矩阵 766. 托普利茨矩阵 832. 翻转图像 867. 转置矩阵 999. 可以被一步捕获的棋子数 1030. 距离顺序排列矩阵单元格 1260. 二维网格迁移 1275. 找 ...

  7. vue3时间转换插件-Moment.js的使用

    vue3时间转换插件-Moment.js的使用 一.组件官网moment.js时间转换插件http://momentjs.cn/Moment Timezone 时区处理类库http://momentj ...

  8. [oeasy]python0081_ANSI序列由来_终端机_VT100_DEC_VT选项_终端控制序列

    更多颜色 回忆上次内容 上次 首先了解了RGB颜色设置 可以把一些抽象的色彩名字 落实到具体的 RGB颜色 计算机所做的一切 其实就是量化.编码 把生活的一切都进行数字化 标准 是ANSI制定的 这个 ...

  9. Microsoft Azure AI 机器学习笔记-1

    机器学习基础: 数据与建模: 数据统计和数学建模是处理数据和描述现实情况的关键工具. 观测值是记录的数据实例,而特征是描述观测对象的属性. 标签则代表监督式学习中的已知输出值. 学习类型: 监督式学习 ...

  10. Midnight Commander (MC)

    Midnight Commander GNU Midnight Commander 是一个可视化文件管理器,根据 GNU 通用公共许可证获得许可,因此有资格成为自由软件.它是一个功能丰富的全屏文本模式 ...