1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>04-Canvas多根线条</title>

 6     <style>

 7         *{

 8             margin: 0;

 9             padding: 0;

10         }

11         canvas{

12             background: yellowgreen;

13         }

14     </style>

15 </head>

16 <body>

17 <canvas></canvas>

18 <script>

19     /*

20     1.多根线条注意点

21     如果是同一个路径, 那么路径样式会被重用(第二次绘制会复用第一次的样式)

22     如果是同一个路径, 那么后设置的路径样式会覆盖先设置的路径样式

23

24     2.如何给每根线条单独设置路径样式?

25     每根线条都开启一个新的路径即可

26     * */

27     let oCanvas = document.querySelector("canvas");

28     let oCtx = oCanvas.getContext("2d");

29     oCtx.moveTo(50, 50);

30     oCtx.lineTo(200, 50);

31     oCtx.lineWidth = 20;

32     oCtx.strokeStyle = "blue";

33     oCtx.stroke();

34

35     oCtx.beginPath(); // 重新开启一个路径

36     oCtx.moveTo(50, 100);

37     oCtx.lineTo(200, 100);

38     oCtx.lineWidth = 10; // 重新设置当前路径样式

39     oCtx.strokeStyle = "red";

40     oCtx.stroke();

41

42     oCtx.beginPath(); // 重新开启一个路径

43     oCtx.moveTo(50, 150);

44     oCtx.lineTo(200, 150);

45     oCtx.lineWidth = 15; // 重新设置当前路径样式

46     oCtx.strokeStyle = "green";

47     oCtx.stroke();

48 </script>

49 </body>

50 </html>

04-canvas多根线条的更多相关文章

  1. Canvas：橡皮筋线条绘制

    Canvas:橡皮筋线条绘制 效果演示 实现要点 事件监听 [说明]: 在Canvas中检测鼠标事件是非常简单的,可以在canvas中添加一个事件监听器,当事件发生时,浏览器就会调用这个监听器. 我们 ...

  2. HTML5 canvas 中的线条样式

    线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

  3. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  4. canvas学习-----1px线条模糊问题

    canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就是1像素,虽然 ...

  5. canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球

    从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...

  6. Canvas 2D绘制抗锯齿的1px线条

    当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿. 事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect. 解决方案是将Can ...

  7. canvas绘制线条详解

    canvas详解----绘制线条 <!DOCTYPE html> <html> <head> <title>canvas详解</title> ...

  8. canvas详解----绘制线条

    <!DOCTYPE html> <html> <head> <title>canvas详解</title> </head> &l ...

  9. SVG 2D入门13 - svg对决canvas

    到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...

  10. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

随机推荐

  1. uniapp 使用z-paging 分页组件 写在头部插槽内的单选按钮无法点击

    这个问题是因为组件层级太低 <z-paging ref="paging" v-model="dataList" @query="queryLis ...

  2. JAVA Stream在jdk17下的例子

    最近因为某些原因,又要用stream,所以耗费了一些时间,做了一些例子,以便自己后续参考. 环境: windows11 jdk 17 spring 2.6.7 Article类代码: package ...

  3. ENSP的VirtualBox虚拟网卡不能用

    VirtualBox 安装好后本地会新建一个名为 "VirtualBox Host-Only Network" 的虚拟网卡,虚拟机可以通过这个虚拟网卡网卡和物理机通信.但ENSP有 ...

  4. hadoop集群配置文件

    配置文件与功能对应: 修改core-site.xml文件 <property> <name>fs.defaultFS</name> <!--配置hdfs系统的 ...

  5. 洛谷P5020

    水一道绿题... #include<iostream> #include<utility> #include<algorithm> using namespace ...

  6. IDEA新手使用教程之使用技巧总结【详解】

    IDEA是一款功能强悍.非常好用的Java开发工具,近几年编程开发人员对IDEA情有独钟. 一.IDEA的下载 IDEA下载地址:https://www.jetbrains.com/idea/down ...

  7. 关联的巧妙用法limit_choices_to

    sa_no = models.ForeignKey(CU004HModel, verbose_name='销货单', on_delete=models.PROTECT, related_name='C ...

  8. Linux安全启动及Machine Owner Key(UEFI BIOS MBR GPT GRUB)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 环境说明   无 前言   只要装过各种系统的人都或多或少会接触 ...

  9. python global变量作用域

    python变量作用域 var1 = 123 def func(): var1 = 456 print(var1) func() #456 print(var1) #123 ============= ...

  10. 【Vue】单据打印功能

    一.打印组件 需要选定区域进行打印,使用vue-print组件 组件安装 npm install vue-print-nb --save 在项目的Main.js中引入(全局注册): import Pr ...