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 ...
随机推荐
- Android 中的property_get/property_set
Android 中的property_get/property_set 背景 在安卓中调试Linux驱动层以及应用层之间的一些功能时,需要获取一些属性. 参考: https://blog.csdn.n ...
- 3.8折年终钜惠，RK3568J国产工业评估板
3.8折年终钜惠,RK3568J国产工业评估板活动火热进行中,错过等一年! -核心板国产化率100%,提供报告-瑞芯微四核ARM Cortex-A55@1.8GHz-4K视频解码.1080P视频编码. ...
- MSSQL慢查询查询与统计
查询MSSQL慢查询: SELECT TOP 20 TEXT AS 'SQL Statement',last_execution_time AS 'Last Execution Time' ,(tot ...
- 也说一说IDEA热部署Web项目最终解决方案，确实大大提高工作效率
热部署就是正在运行状态的应用,修改了它的源码之后,在不重新启动的情况下能够自动把增量内容编译并部署到服务器上,使得修改立即生效.热部署为了解决的问题有两个: 1.在开发的时候,修改代码后不需要重启应用 ...
- ComfyUI进阶：Comfyroll插件 (一)
ComfyUI进阶:Comfyroll插件 (一) 前言: 学习ComfyUI是一场持久战,而Comfyroll Studio 是一款功能强大的自定义节点集合,专为 ComfyUI 用户打造,旨在提供 ...
- [oeasy]python0045_转化为10进制数_int_integrate_integer_entire_整数
转化为10进制 回忆上次内容 上这次总结了四种进制 函数名 对应单词 进制类型 数字事例 前缀 bin() binary 2 0b1100001 0b oct() octal 8 0o141 0o h ...
- Midnight Commander (MC)
Midnight Commander GNU Midnight Commander 是一个可视化文件管理器,根据 GNU 通用公共许可证获得许可,因此有资格成为自由软件.它是一个功能丰富的全屏文本模式 ...
- SMU Summer 2024 第一周周报 （zhaosang）
学到了很多,不仅仅是学习方面的,在学校学跟在家寒假对比,天差地别吧. 补题的过程中收获满满,最近练习二分三分,栈队列单调栈等习题,题目不简单,努力学习中.. 打比赛也是,也有打的很惨的时候,我自己需要 ...
- UE中返回值为数组的时候，无法传递Reference的问题
我如果要修改一个类或者结构体的成员变量, 那么我需要通过函数返回 也就是说Struct目前不能传递引用,只能传递备份
- 逆向动态加载Dex（内存加载class）
逆向一个app, 其核心算法是通过反射调用的, 反编译软件中无法找到该类, 并且也无法hook. Java.perform(function(){ Java.enumerateClassLoaders ...