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系列教程 ...
随机推荐
- SSM框架笔记 庆祝学习SSM框架结束！！！
终于在2023/3/29日,黑马程序员旗下的ssm框架视频看完了,也是总结了1万多字的笔记,把黑马的和自己的整合了一下 完结撒花,接下来开始学习SpringBoot和软考中级设计师. 总的来说,我还是 ...
- UG 2406 python 二次开发环境配置
UG 2406 python 二次开发环境配置 项目地址 https://gitee.com/unm001/nx2406.git 安装python 安装 python 3.10.11 D:\prog\ ...
- IIS部署错误HTTP Error 500.36 ASP.NET Core IIS hosting failure(out-of-process)
错误提示 HTTP Error 500.36 - ASP.NET Core IIS hosting failure (out-of-process) The out of process reques ...
- Golang channel底层是如何实现的？(深度好文)
Hi 你好,我是k哥.大厂搬砖6年的后端程序员. 我们知道,Go语言为了方便使用者,提供了简单.安全的协程数据同步和通信机制,channel.那我们知道channel底层是如何实现的吗?今天k哥就来聊 ...
- yb课堂 首页home开发 《三十七》
Home模块开发 拆分子组件 Home banner videoList 指令属性里面取data里面的数据不用加{{}},html标签内容体中间则需要加双花括号 创建component文件夹 在src ...
- 洛谷P2430
还是很容易能看出来是01背包 #include<iostream> #include<utility> using namespace std; typedef long lo ...
- 基于EF Core存储的国际化服务
前言 .NET 官方有一个用来管理国际化资源的扩展包Microsoft.Extensions.Localization,ASP.NET Core也用这个来实现国际化功能.但是这个包的翻译数据是使用re ...
- VirtualBox Ubuntu 22.04 Server联网、与主机互联
使用 VirtualBox 7.0安装了两个Ubuntu 22.04 Server虚拟机,想要实现: 主机与虚拟机互联 虚拟机之间互联,且互联的IP应为静态 虚拟机可以联网 解决方法 每个虚拟机配置两 ...
- CM3调试系统简析
CM3 调试系统简析 **"一直以来,单片机的调试一直不是很突出的主题,很多简单些的程序在开发中,甚至都没有调试的概念,而只是把生成的映像直接烧入片子,再根据错误症状来判断问题,然后修改程序 ...
- Session的默认保存路径
在php.ini里的配置session.save_path是注释掉的,那么Seesion保存的路径在不同类型操作系统保存在什么位置? Linux:/tmp 或 /var/lib/php/session ...