04-canvas多根线条
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多根线条的更多相关文章
- Canvas：橡皮筋线条绘制
Canvas:橡皮筋线条绘制 效果演示 实现要点 事件监听 [说明]: 在Canvas中检测鼠标事件是非常简单的,可以在canvas中添加一个事件监听器,当事件发生时,浏览器就会调用这个监听器. 我们 ...
- HTML5 canvas 中的线条样式
线条样式属性 lineCap 设置或返回线条的结束端点样式 butt 默认.向线条的每个末端添加平直的边缘. round 向线条的每个末端添加圆形线帽. ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- canvas学习-----1px线条模糊问题
canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就是1像素,虽然 ...
- canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球
从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...
- Canvas 2D绘制抗锯齿的1px线条
当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿. 事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect. 解决方案是将Can ...
- canvas绘制线条详解
canvas详解----绘制线条 <!DOCTYPE html> <html> <head> <title>canvas详解</title> ...
- canvas详解----绘制线条
<!DOCTYPE html> <html> <head> <title>canvas详解</title> </head> &l ...
- SVG 2D入门13 - svg对决canvas
到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
随机推荐
- Java面试知识点（五）hashmap、hashtable和hashset
1. 关于 HashMap 的一些说法: a) HashMap 实际上是一个 "链表散列" 的数据结构,即数组和链表的结合体.HashMap 的底层结构是一个数组,数组中的每一项是 ...
- 【论文阅读】RAL2022: Make it Dense: Self-Supervised Geometric Scan Completion of Sparse 3D LiDAR Scans in Large Outdoor Environments
0. 参考与前言 论文链接:https://ieeexplore.ieee.org/document/9812507 代码链接:https://github.com/PRBonn/make_it_de ...
- JVM学习笔记-如何在IDEA打印JVM的GC日志信息
若要在Idea上打印JVM相应GC日志,其实只需在Run/Debug Configurations上进行设置即可. 拿<深入Java虚拟机>书中的3-7代码例子来演示,如 1 public ...
- 异构数据源数据同步 → 从源码分析 DataX 敏感信息的加解密
开心一刻 出门扔垃圾,看到一大爷摔地上了 过去问大爷:我账户余额 0.8,能扶你起来不 大爷往旁边挪了挪 跟我说到:孩子,快,你也躺下,这个来钱快! 我没理大爷,径直去扔了垃圾 然后飞速的躺在了大爷旁 ...
- Python 使用Python操作xmind文件
使用Python操作xmind文件 by:授客 QQ:1033553122 测试环境 Win10 Python 3.5.4 XMind-1.2.0.tar.gz 下载地址: https://fil ...
- html5 video标签 去掉边框黑线
只需在样式中添加: mix-blend-mode: darken; 注意:IE和Edge浏览器不支持mix-blend-mode属性
- Hyperledger Fabric 2.x 环境搭建
一.说明 区块链网络的核心是分布式账本,在这个账本中记录了网络中发生的所有交易信息. Hyperledger Fabric是一个是开源的,企业级的,带权限的分布式账本解决方案的平台.Hyperledg ...
- python selenium元素定位
1.ID元素定位基于元素属性中的id的值来进行定位,id是一个标签的唯一属性值可以通过id属性来唯一定位一个元素,是首选的元素定位方式,动态ID不做考虑.driver .find_element_by ...
- telegraf 常用命令总结
本文为博主原创,转载请注明出处: Telegraf 是一个灵活的服务器代理,用于收集和报告指标.它支持插件驱动,这意味着你可以根据需要添加或修改功能. 1.使用telegraf --help 查看te ...
- [香橙派开发系列]3b系统安装和使用vscode进行远程连接
目录 前言 一.下载镜像和安装系统 二.使用串口助手进行调试 三.查看系统的ip地址 四.使用vscode连接香橙派 最后 前言 之前研究中断的时候一直出现问题,我怀疑是因为zero 3不支持,所以一 ...