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. selenium验证码识别，超级鹰干超级鹰

    from selenium.webdriver import Edge from selenium.webdriver.common.by import By # 在这里导入浏览器设置相关的类 fro ...

  2. Java高效率查询Mysql节点树数据

    示例 目前有一个功能:任务计划管理,必然存在多级子任务的父子级关系,每个任务还会存在其它数据的关联表. mysql无法一次性递归查出想要的数据结构,想必很多人都会是通过根目录递归查询数据库的方式查出树 ...

  3. Solo 开发者周刊 （第10期）：Sora 之后，谁是被遗忘的？谁又是被仰望的？

    这里会整合 Solo 社区每周推广内容.产品模块或活动投稿,每周五发布.在这期周刊中,我们将深入探讨开源软件产品的开发旅程,分享来自一线独立开发者的经验和见解.本杂志开源,欢迎投稿. 好文推荐 Sol ...

  4. LabVIEW图标编辑器中的文本变得模糊

    问题详述 在LabVIEW图标编辑器中将文本添加到VI图标时,如果我将字体大小设置为小于10,文本会变得模糊.当字体大小设置为大于11时,文本会正常地显示,但是字体则变得太大而无法放入图标中. 真难看 ...

  5. hbuilderx集成集中式版本控制系统SVN

    前提条件: 1.下载最新的hbuilderx https://www.dcloud.io/hbuilderx.html 2.安装Tortorisesvn客户端,特别注意安装时一定要安装command ...

  6. 使用 useLazyFetch 进行异步数据获取

    title: 使用 useLazyFetch 进行异步数据获取 date: 2024/7/20 updated: 2024/7/20 author: cmdragon excerpt: 摘要:&quo ...

  7. 使用ollama本地部署gemma记录

    1.官网https://ollama.com/安装ollama 2.先配置一下环境变量 不然下载的东西会默认丢在C盘里 3.cmd执行ollama run gemma:2b (使用后推荐直接下7b,2 ...

  8. RHCA rh442 005 (NICE FIFO RR) 资源强占与分配 cpuset

    cgroup 容器 控制服务访问 limits 控制用户 进程管理 [root@servera ~]# ps -aux | more USER PID %CPU %MEM VSZ RSS TTY ST ...

  9. Jmeter函数助手25-log

    log函数用于记录一条日志并返回其值. String to be logged (and returned):函数会返回该值.控制台也能看到该字符 Log level (default INFO) o ...

  10. 对比python学julia（第一章）--（第三节）山巅一寺一壶酒

    在小学阶段背过圆周率的同学对这节的标题应该不陌生.π(3.14159-)是大家熟悉的普通无理数,但也是非常神秘的一组数字,例如几个世纪以来,埃及考古学家和神秘主义追随者一直痴迷于胡夫金字塔暗藏的圆周率 ...