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. CLR via C# 笔记 -- 可空值类型(19)

    1. 值类型的变量永远不会为null,所有需要使用System.Nullable<T> 2. 操作数是null,结构是null:==.!=操作数都为null,则返回true:<.&g ...

  2. 为什么不推荐使用Linq?

    相信很多.NETer看了标题,都会忍不住好奇,点进来看看,并且顺便准备要喷作者! 这里,首先要申明一下,作者本人也非常喜欢Linq,也在各个项目中常用Linq. 我爱Linq,Linq优雅万岁!!!( ...

  3. todo高通Android UEFI中的LCD分析（1）：启动流程分析

    # 高通Android UEFI中的LCD分析(1):启动流程 背景 之前学习的lk阶段点亮LCD的流程算是比较经典,但是高通已经推出了很多种基于UEFI方案的启动架构. 所以需要对这块比较新的技术进 ...

  4. C#中重写(override)及覆盖(new)的区别详解

    1. 重写和覆盖的定义 1.1 重写(override)的定义   在C#中,用override关键字来重写一个父类中的虚方法或抽象方法.override关键字用于指示编译器,我要用派生类中的一个方法 ...

  5. 【Python】用Python把从mysql统计的结果数据转成表格形式的图片并推送到钉钉群

    ** python把数据转为图片 / python推送图片到钉钉群 ** 需求:通过python访问mysql数据库,统计业务相关数据.把统计的结果数据生成表格形式的图片并发送到钉钉群里. 一:Cen ...

  6. Nunjucks

    Nunjucks是什么东东?其实它是一个模板引擎. 那什么是模板引擎? 模板引擎就是基于模板配合数据构造出字符串输出的一个组件.比如下面的函数就是一个模板引擎: function examResult ...

  7. Spring5.X bean自动装配Autowire属性

    属性注入 set方法.构造函数.POJO.list.map.ref,属于手工注入,点我直达 Spring自动注入 使用<bean>元素的autowire属性为一个bean定义指定自动装配模 ...

  8. weui weui-switch 开关取值，设置默认状态

    html <div class="weui-cell__ft"> <input class="weui-switch" type=" ...

  9. 新一代云原生日志架构 - Loggie的设计与实践

    Loggie萌芽于网易严选业务的实际需求,成长于严选与数帆的长期共建,持续发展于网易数帆与网易传媒.中国工商银行的紧密协作.广泛的生态,使得项目能够基于业务需求不断完善.成熟.目前已经开源:https ...

  10. [oeasy]python049_帮助手册_pydoc_manual_document

    帮助手册 回忆上次内容 上次了解了注释 注释是为了让程序更可读 注释不会影响程序运行速度   注释分为两种 单行的 以#开头 不能是字符串当中的#   多行的 三个" 三个'     多行注 ...