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系列教程 ...
随机推荐
- Ceph提供nfs服务
目录 Ceph提供nfs服务 1. 前期准备 1.1 检查模块 1.2 检查是否有nfs-ganesha集群 2. 创建nfs服务 2.1 ceph提供的nfs的架构 3. nfs导出 3.1 创建c ...
- Python中的属性
Python中的属性主要分为类属性,对象属性. 1.类属性 类属性:类所有,所有的实例对象都能够共享,类定义时就直接指定的属性,能通过类名和实力对象名访问,当当前的类属性被实例对象通过对象名.属性名的 ...
- 从零开始学Spring Boot系列-集成Spring Security实现用户认证与授权
在Web应用程序中,安全性是一个至关重要的方面.Spring Security是Spring框架的一个子项目,用于提供安全访问控制的功能.通过集成Spring Security,我们可以轻松实现用户认 ...
- jsp---------------------复选框，全选按钮
js部分:注意:<script type="text/javascript" ></script>内不能有其他内容,否则会无效,若有则另起一对<scr ...
- 跟我一起学习和开发动态表单系统-前端用vue、elementui实现方法(3)
基于 Vue.Element UI 和 Spring Boot + MyBatis 的动态表单系统前端实现解析 在现代企业信息系统中,动态表单是一种非常常见的功能.它可以根据业务需求灵活地调整表单结构 ...
- multipass中docker的使用及固定ip的配置
之前一直用WSL2,但是可能我高估了我笔记本的性能,每次开启后我的win11都闪得厉害. 公司给配发的联想昭阳 前两天实在受不了,把它重装了.才发现之前一直很抵触重装,结果重装完工作几乎没怎么受影响. ...
- ASP.NET Core修改CentOS的IP地址
最近做的一个产品中有个需求,就是客户使用的时候可以通过Web网页修改服务器的IP地址(客户是普通使用者,没有Linux使用经验,我们的产品作为一台服务器部署到客户机房,客户通过HTTP方式访问使用). ...
- idea 提交代码到GitHub
配置账户 配置Git安装目录 一般默认识别,其他参数不变 配置GitHub账户 提交到GitHub 1.VCS->import into version control -> share ...
- 洛谷P1439
这道题也给了我很多的思考,因为很久没有做过LIS和KLCS的题了 为什么能采用二分 因为f数组保存的是LCS长度为i时的最小末尾的值,可以证明f数组一定是单调的,并且是严格单调的 为什么要保存末尾最小 ...
- TP5 连接多个数据库
use think\Config; $config = Config::get('database2'); //读取第二个数据库配置 $connect = Db::connect($config); ...