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. Typora行内公式识别不了

    Typora行内公式识别不了,主要是因为行内公式属于LaTeX扩展语法,并非Markdown的通用标准 需要在Typora的"文件"-"偏好设置"-" ...

  2. Go1.13的坑：无法结束Goroutine

    背景 本人作为一名SRE,想用Go模拟Cpu占用100% 1秒钟,但是在Go1.13上遇到了问题,1s后Goroutine不会停止. 只要用了for{},Goroutine就无法结束,即使主Gorou ...

  3. HBase 中的 JVM 与 GC

    HBase中JVM基本配置 在JVM中,默认情况下会设置minimum heap size 为 1/64 可用物理内存,并为maximum heap size设置 1/4 的物理可用内存(不过在Jav ...

  4. Freertos学习：05-内核控制

    --- title: rtos-freertos-05-kernel-control date: 2020-06-22 11:10:19 categories: tags: - kernel - fr ...

  5. P2045 方格取数加强版题解

    题目链接:P2045 方格取数加强版 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目: 出一个 n*n 的矩阵,每一格有一个非负整数 A{i,j}且A{i,j} <=10 ...

  6. 全志A40i＋Logos FPGA开发板（4核ARM Cortex-A7）硬件说明书（上）

    前 言 本文档主要介绍TLA40iF-EVM工业评估板硬件接口资源以及设计注意事项等内容. 核心板的ARM端和FPGA端的IO电平标准一般为3.3V,上拉电源一般不超过3.3V,当外接信号电平与IO电 ...

  7. 在VisualStudio中WPF应用程序在打开窗体界面设计时报错<发生了未经处理的异常>的解决方法

    在网上找了一个wpf的开源项目,在打开窗体,点击设计的时候,提示错误信息如下 System.Resources.MissingSatelliteAssemblyExceptionThe satelli ...

  8. PLSQL 编码设置

    1.先查询plsql编码格式 select userenv('language')from dual 2.新建用户变量,变量名=NLS_LANG,变量值,刚才sql查询的结果 保存后,重启plsql即 ...

  9. 说说XXLJob分片任务实现原理？

    XXL Job 是一个开源的分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展的分布式任务调度框架. 这两天咱们开发的 AI Cloud 项目中,也使用到了 XXL Job 来执行 ...

  10. Jenkins 添加Linux固定代理节点

    实践环境 Jenkins 2.304 jdk-8u131-linux-x64.rpm centos-release-7-9.2009.1.el7.centos.x86_64 操作步骤 安装JDK 在预 ...