07-canvas绘制虚线
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绘制虚线的更多相关文章
- canvas绘制虚线图表
最近有读者加我微信咨询这个问题,如下图所示: 要实现的效果如下: 其实难度不大,但是考虑一些人员对于canvas不熟悉,还是简单的介绍下. 其实该图表,就是一个圆圈外面在套一个圆弧的效果, 主要的难点 ...
- Canvas学习：封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- canvas学习总结三：绘制虚线
上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...
- canvas学习总结四：绘制虚线
上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...
- 第165天：canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
随机推荐
- Unity中使用ProtocolBuffer
Unity中使用ProtocolBuffer unityProtocolBufferUnity ProtocolBuggerC# ProtocolBuffer Unity中使用ProtocolBuff ...
- Windows无法访问vsftpd
在搭建vsftpd的时候注意放行相应的服务,注意,是服务,不是端口!! 如果你简单的--add-port放行20和21端口,那么恭喜你,就是访问不了. 正确的方法是--add-service=ftp, ...
- C# Linq俩个list<Datarow> 取差集,并自定义字段
可以自定义类 ,也可以从参考官网文档:Enumerable.Except 方法 (System.Linq) | Microsoft Learn List<DataRow> list1 = ...
- Quarkus初体验：动态加载和原生部署
在前面的文章<尝试官方的第一个SpringNative 0.11程序>中提到过Quarkus这门技术.这里就简单演示一下它的两个主要功能:Live Coding和Native Build. ...
- Centos7安装Redis详细步骤（配置开机自启）
Redis 获取redis安装包使用tar命令解压. $ tar -zxzf redis-6.2.6.tar.gz 编译和安装redis 进入redis目录,执行make编译. $ cd redis- ...
- Yaml配置文件语法详解
YAML 简介 YAML,即 "YAML Ain't a Markup Language"(YAML 不是一种标记语言)的递归缩写,YAML 意思其实是" Yet Ano ...
- Math.random()方法的使用及公式
条件1:取n-m范围的随机数(不包含m) 公式1:(int)(Math.random() * (m - n) + n); 条件2:取n-m范围的随机数(包含m) 公式2:(int)(Math.rand ...
- win10打不出中文的修复方法！
说明 在Win10系统中,默认自带了中文输入法,使用起来非常的方便,但有时win10系统中自带的输入法会打不出中文的情况,该怎么办呢?遇到这样的问题,我们可以参考下本文中的方法来修复. 步骤: cmd ...
- 记一次 redis 事件注册不当导致的内存泄露
线上的程序跑着跑着内存越来越大,并且没有下降的趋势,重启一下程序也只能短暂恢复.通过 htop 命令再按一下 M 键按内存占用大小排个序,程序会占好几个G.那好,让我们来分析一下. 收集dump 通过 ...
- AT_arc041_b 题解
洛谷链接&Atcoder 链接 本篇题解为此题较简单做法及较少码量,并且码风优良,请放心阅读. 题目简述 给定一个 \(N \times M\) 的矩阵,此矩阵的每一个元素都向上.下.左.右 ...