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. 随机二次元图片API上线

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 随机二次元图片API上线 日期:2017-12-6 阿珏 ...

  2. TCP三次握手和四次挥手全过程

    TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立连接: SYN:同步标志.该标志仅在三次握手建立TCP连接时有效. ACK:确认标志.同时提示远端系统已经成功接收所有数据 ...

  3. tortoisegit 配置ssh登录

    习惯使用小乌龟. 服务器:gitblit 客户端:TortoiseGit 2.13.0.1 (C:\Program Files\TortoiseGit\bin) git version 2.36.1. ...

  4. js-文件读写和上传下载的简单例子01

    现下,网络越来越快,浏览器的功能和性能越来越好,所以很多时候,已经不需要一些复杂的框架来实现不是非常复杂的功能. 我们只有在以下情况才会考虑使用框架或者现成的第三方组件: 1.功能复杂,自己写没有必要 ...

  5. Windows无法访问vsftpd

    在搭建vsftpd的时候注意放行相应的服务,注意,是服务,不是端口!! 如果你简单的--add-port放行20和21端口,那么恭喜你,就是访问不了. 正确的方法是--add-service=ftp, ...

  6. python重拾基础第一天

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  7. 灰色预测GM(1,1)模型的理论原理

    灰色预测是对时间有关的灰色过程进行预测.通过建立相应的微分方程模型,从而预测事物未来发展趋势的状况. 由于笔者的水平不足,本章只是概括性地介绍GM(1,1)模型的理论原理,便于对初学者的初步理解 目录 ...

  8. ASP.NET Core修改CentOS的IP地址

    最近做的一个产品中有个需求,就是客户使用的时候可以通过Web网页修改服务器的IP地址(客户是普通使用者,没有Linux使用经验,我们的产品作为一台服务器部署到客户机房,客户通过HTTP方式访问使用). ...

  9. 10 pdf分享失败

    PC端分享pdf,复制粘贴pdf链接后跳转搜索首页

  10. API网关实践-网易云轻舟微服务

    微服务最佳实践中,我们需要通过统一的 API 网关进行服务能力的共享,API 网关为用户提供发布.管理.保护和监控 API的能力,帮助用户在自己的多个系统之间,或者内部系统与合作伙伴以及第三方的系统之 ...