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. 掌握 Nuxt 3 中的状态管理：实践指南

    title: 掌握 Nuxt 3 中的状态管理:实践指南 date: 2024/6/22 updated: 2024/6/22 author: cmdragon excerpt: 摘要:该文指南详述了 ...

  2. 认真学习CSS3-问题收集-102号-关于定位

    css中有关于定位的一个属性position. 在w3cschool中,position的介绍如下: 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定 ...

  3. EthernetIP IO从站设备数据 转opc ua项目案例

    1 案例说明 设置网关采集EthernetIP IO设备数据 把采集的数据转成opc ua协议转发给其他系统. 2 VFBOX网关工作原理 VFBOX网关是协议转换网关,是把一种协议转换成另外一种协议 ...

  4. Linux内核：通知链 机制

    Linux内核:通知链 机制 背景 在驱动分析中经常看到fb_notifier_callback,现在趁有空学习一下. 参考: https://www.cnblogs.com/armlinux/arc ...

  5. 全志科技T3国产工业核心板规格书（四核ARM Cortex-A7，主频1.2GHz）

    1 核心板简介 创龙科技SOM-TLT3是一款基于全志科技T3处理器设计的4核ARM Cortex-A7国产工业核心板,每核主频高达1.2GHz. 核心板通过邮票孔连接方式引出CSI.TVIN.MIP ...

  6. 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-1-环境准备与搭建

    1.简介 Python+Playwright系列的文章还没有结束,就有好的小伙伴或者童鞋们私信公众号留言,问宏哥什么时候出Java语言的Playwright的自动化测试文章.本来想趁热打铁将Pytho ...

  7. 从零开始带你上手体验Sermant自定义插件开发

    本文分享自华为云社区<Sermant自定义插件开发上手体验>,作者:华为云开源. 一.研究缘由 由于目前我们所处的行业是汽车行业,项目上进行云服务的迁移时使用到了Sermant中的相关插件 ...

  8. SQLServer的操作以及一些概念

    初始SQLServer 创建数据库 create database 数据库名 创建表 选择数据库 USE MyDb; 创建表 CREATE TABLE t_user ( id INT, usernam ...

  9. [oeasy]python0132_[趣味拓展]emoji_表情符号_抽象话_由来_流汗黄豆

    emoji表情符号 回忆上次内容 上次了解了unicode 和 utf-8 unicode是字符集 utf-8是一种可变长度的编码方式 utf-8是实现unicode的存储和传输的现实的方式   ​ ...

  10. 学习笔记--Java中方法递归调用

    Java中方法递归调用 public class RecursionTest01{ public static void main(String[] args){ System.out.println ...