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. Java JSON组成和解析

    本框架JSON元素组成和分析,JsonElement分三大类型JsonArray,JsonObject,JsonString. JsonArray:数组和Collection子类,指定数组的话,使用A ...

  2. php+sql后台实现从主表迁出至副表(数据超万条)

    上万条甚至上百万数据进行迁出做备份或者进行不妨碍原系统数据的操作,现在很多企业都会用到,目前就需要将上百万条数据进行迁出到副表保存并操作,直接再后台写一个按钮进行操作,既方便操作也不会很慢.毕竟是客户 ...

  3. Android Verified Boot介绍与有关使用

    Android Verified Boot介绍与有关使用 背景 在搞安卓驱动调试的时候,由于不熟悉,导致系统没有按照我预期启动完毕:因此需要注意这一块的东西. 简介 Verified Boot 是 A ...

  4. Java常见的加密方式

    前言 传说在古罗马时代,发生了一次大战.正当敌方部队向罗马城推进时,古罗马皇帝凯撒向前线司令官发出了一封密信:VWRS WUDIILF.这封密信被敌方情报人员翻遍英文字典,也查不出这两个词的意思. 此 ...

  5. yb课堂 新版VueCli 4.3创建vue项目，Vue基础语法入门 《二十九》

    Vue模版语法开发起步 基于HTML的模版语法,允许声明式地将DOM绑定至底层Vue实例的数据 用简洁的模版语法来声明式的将数据渲染进DOM的系统 结合响应系统,在应用状态改变时,Vue能够智能地计算 ...

  6. 洛谷P1095

    [NOIP2007 普及组] 守望者的逃离 题目背景 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变. 题目描述 守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上. ...

  7. Acwing周赛分享

    Acwing 周赛28 题面1 给定一个由大写字母构成的字符串 s,请计算其中有多少个子序列 QAQ. 注意,子序列不需要连续. 提示:本题数据范围较小,可以直接三重循环枚举三个字母的位置. 输入格式 ...

  8. Java-C3P0和Druid连接池的运用

    1.概念 其实就是一个容器(集合),存放数据库连接的容器 当系统初始化好后,容器被创建,容器会申请一些连接对象,当用户来访问数据库时,从容器中获取连接对象,用户访问完之后,会将连接对象归还给容器. 好 ...

  9. .NET6 API 部署标准流程

    一.安装dotnet环境 #第一步:将 Microsoft 包签名密钥添加到受信任密钥列表,并添加 Microsoft 包存储库 sudo rpm -Uvh https://packages.micr ...

  10. 3.1 Y86-64指令集体系结构

    程序员可见的状态 这里的程序员即可以是用汇编代码写程序的人,也可以是产生机器级代码的编译器.程序员可见的状态如下,有15个程序寄存器(%rax,%rbx等),三个一位的条件(ZF,OF,SF) ,程序 ...