《canvas》之第4章 线条操作

已于 2023-12-13 10:15:16 修改
阅读量382 收藏 1
点赞数
分类专栏： canvas 学习 整理 文章标签： canvas 前端
于 2022-06-23 16:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125362855
版权
整理 同时被 3 个专栏收录
181 篇文章 10 订阅
订阅专栏
学习
130 篇文章 4 订阅
订阅专栏
canvas
20 篇文章 2 订阅
订阅专栏

《canvas》之第4章 线条操作

第4章 线条操作

4.1 线条操作简介

  • 线条操作属性
属性说明
lineWidth定义线条宽度
lineCap定义线帽样式
lineJoin定义两个线条交接处样式
  • 线条操作方法
方法说明
setLineDash()定义线条的虚实样式

4.2 lineWidth属性

cxt.lineWidth = 整数;

默认1，默认单位px。

  • 线条宽度
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //lineWidth值为5
            //cxt.beginPath();
            cxt.moveTo(20, 20);
            cxt.lineTo(180, 20);
            cxt.lineWidth = 5;
            cxt.stroke();

            //lineWidth值为10
            cxt.beginPath();
            cxt.moveTo(20, 70);
            cxt.lineTo(180, 70);
            cxt.lineWidth = 10;
            cxt.stroke();

            //lineWidth值为15
            cxt.beginPath();
            cxt.moveTo(20, 120);
            cxt.lineTo(180, 120);
            cxt.lineWidth = 15;
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
  • 曲线宽度
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, false);
            cxt.lineWidth = 5;
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

假设线条宽度lineWidth，strokeRect()方法绘制矩形实际宽度为width+lineWidth，实际高度为height+lineWidth，arc()方法绘制圆形的实际半径为radius+lineWidth。

4.3 lineCap属性

定义线条开始处和结尾处的线帽样式。

cxt.lineCap = "属性值";
属性值说明
butt无线帽，默认
round圆形线帽，半径为线宽一半
square正方形线帽，宽度为线宽一半
  • 线帽直线
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.lineWidth = 16;

            //lineCap值为默认值（butt）
            //cxt.beginPath();
            cxt.moveTo(20, 20);
            cxt.lineTo(180, 20);
            //cxt.lineCap = "butt";
            cxt.stroke();

            //lineCap值改为round
            cxt.beginPath();
            cxt.moveTo(20, 70);
            cxt.lineTo(180, 70);
            cxt.lineCap = "round";
            cxt.stroke();

            //lineCap值改为square
            cxt.beginPath();
            cxt.moveTo(20, 120);
            cxt.lineTo(180, 120);
            cxt.lineCap = "square";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
  • z
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.moveTo(50, 50);
            cxt.lineTo(100, 50);
            cxt.lineTo(50, 100);
            cxt.lineTo(100, 100);
            cxt.lineWidth = 12;
            cxt.lineCap = "round";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

4.4 lineJoin属性

定义线条交接处的样式。

cxt.lineJoin = "属性值";
属性值说明
miter尖角，默认
round圆角，半径为线宽一半
bevel斜角，对角线为线宽
  • 直线交接样式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");
			var yoffset = 100;

            cxt.lineWidth = 12;
			
            //cxt.beginPath();
            cxt.moveTo(50, 50);
            cxt.lineTo(100, 50);
            cxt.lineTo(50, 100);
            cxt.lineTo(100, 100);
            //cxt.lineJoin = "miter";
            cxt.stroke();
			
            cxt.beginPath();
            cxt.moveTo(50, 50+yoffset);
            cxt.lineTo(100, 50+yoffset);
            cxt.lineTo(50, 100+yoffset);
            cxt.lineTo(100, 100+yoffset);
            cxt.lineJoin = "round";
            cxt.stroke();
			
            cxt.beginPath();
            cxt.moveTo(50, 50+yoffset*2);
            cxt.lineTo(100, 50+yoffset*2);
            cxt.lineTo(50, 100+yoffset*2);
            cxt.lineTo(100, 100+yoffset*2);
            cxt.lineJoin = "bevel";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="350" style="border:1px dashed gray;"></canvas>
</body>
</html>

4.5 setLineDash()方法

定义线条的虚实样式。

cxt.setLineDash(array);

array是一个数组组合。

[10, 5]表示10px实线，5px空白，Chrome、Firefox支持setLineDash()方法，IE不支持。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            cxt.strokeStyle = "red";
            cxt.setLineDash([10, 5]);
            cxt.strokeRect(50, 50, 80, 80);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
mali378287007
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas绘制虚线setLineDash方法说明
細水、長流√的专栏
05-17 2661
调用函数setLineDashvoid ctx.setLineDash(segments); segments一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。 function drawDashedLine(pattern) { ctx.beginPath(); ctx.setLineDash(pattern); ctx.
Canvas绘制虚线setLineDash
hotboyboy的博客
03-15 5768
void ctx.setLineDash(segments); segments一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。 function drawDashedLine(pattern) { ctx.beginPath...
canvas绘制虚线setLineDash
编程界明世隐的博客
01-15 2726
window.onload=function(){ ctx.beginPath(); ctx.setLineDash([]);//设定实线与空白的大小 ctx.moveTo(50,100); ctx.lineTo(250,100); ctx.stroke(); ctx.beginPath(); ctx.setLineDash([4]);//设定实线与空白的大小 ctx.moveT.
Canvas 绘制虚线(setLineDash())
houyanhua1的专栏
04-10 5997
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &am
canvas设置线条样式（宽度，端点形态、拐点样式、虚线）
最新发布
大剑师兰特的GIS世界
01-11 1607
- lineWidth: 设置线条宽度。 - lineCap: 设置线条末端样式。 - lineJoin: 设定线条与线条间接合处的样式。 - miterLimit: 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。 - setLineDash() 设置虚线、点划线等。
canvas基础
qq_36712191的博客
03-21 558
标签       使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.默认 canvas 的宽高为 300 和 150.不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
09-28
HTML5 Canvas 是一种强大的网页图形绘制工具，它允许开发者通过JavaScript在网页上直接绘制图形，无需依赖第三方插件，如Flash。Canvas 提供了一个二维绘图环境，通过API接口，我们可以控制图形的绘制，包括线条、...
HTML5 Canvas基本线条绘制的实例教程
01-19
怎么画线条？和现实中画画差不多：1.移动画笔，使画笔移动至绘画的开始处2.确定第一笔的停止点3.规划好之后，选择画笔（包括画笔的粗细和颜色等）4.确定绘制 因为Canvas是基于状态的绘制（很重要，后面会解释），...
原生JS使用Canvas实现拖拽式绘图功能
12-11
4、拖拽式绘制（鼠标移动过程中不断进行canvas重绘） 5、图片绘制（作为背景图片时重绘会发生闪烁现象，暂时有点问题，后面继续完善） 5、清空绘制功能 6、新版本优化绘制性能（使用共享坐标变量数组，减少了大量的...
Android canvas drawBitmap方法详解及实例
08-31
如果你想只绘制Bitmap的一部分，比如红色线条划分的四个部分中的第二个部分，你可以调整`src`矩形的坐标。假设第二个部分的左上角坐标是(x1, y1)，右下角是(x2, y2)，则可以这样设置`src`： ```java Rect srcRect =...
js+canvas绘制五角星的方法
10-22
在这个例子中，`drawStar`函数接受四个参数：`context`是Canvas的2D渲染上下文，`r`是五角星的半径，`x`和`y`是五角星中心的坐标。函数首先设置线条宽度为5像素，然后开始一个新的路径。 计算每个顶点之间的角度差`...
Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset...
DevOps海洋的渔夫@专栏
01-08 2454
设置Canvas画笔的样式 画笔的状态 lineWidth 线宽，默认1px lineCap 线末端类型：(butt默认)、round、square lineJoin 相交线的拐点 miter(默认)、round、bevel strokeStyle 线的颜色 fillStyle 填充颜色 setLineDash() 设置虚线 getLineDash() 获取虚线宽度集合 lin...
canvas详解01-绘制基本图形
大雾起了清晨
06-23 3393
既然我们已经设置了 canvas 环境，我们可以深入了解如何在 canvas 上绘制。到本文的最后，你将学会如何绘制矩形，三角形，直线，圆弧和曲线，变得熟悉这些基本的形状。绘制物体到 Canvas 前，需掌握路径，我们看看到底怎么做。
绘制虚线－－CGContextSetLineDash详解
学如逆水行舟
08-03 1629
绘图第三篇：CGContextSetLineDash 绘制虚线 就是上边的这个API，怎么用呢？看下边demo: 效果图：
[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
weixin_33725126的博客
09-26 353
上文，写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)，本文主要是关于线条的样式设置 lineWidth: 设置线条的宽度，值是一个数值，如lineWidth = 5. 画3条不同宽度的线条： 1 &lt;style&gt; 2 body { 3 background: #0...
Html5 Canvas 绘制虚线和实线的切换方法
热门推荐
给力VSTO
12-19 1万+
场景应用： 1)、最开始默认绘制的都是实线。       var canvas = document.getElementById("canvas");       var context = canvas.getContext("2d");       context.strokeStyle = "black";       context.lineWidth = 5;      
Canvas（二）使用样式和颜色
sinat_37138973的博客
01-20 712
参考：使用样式和颜色 - Web API 接口参考 | MDN 使用样式和颜色 1、颜色填充 想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。 color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）。 2、透明度Transparency 通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。 globalAl
canvas绘制跑马灯lineDashOffset、lineDashOffset
编程界明世隐的博客
01-15 1496
var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); var offset=0; function draw(){ ctx.clearRect(0,0, canvas.width, canvas.height); ctx.setLineDash([10,4, 2]);//实线..
canvas清除特定线条
07-28
要清除Canvas上的特定线条，你需要重新绘制整个画布，但在绘制前，将你想要清除的线条之外的所有内容保存下来。以下是一个示例代码，清除特定线条的步骤： 1. 创建一个数组，用于保存所有要保留的线条。 2. 在Canvas上绘制所有要保留的线条。 3. 使用`clearRect`方法清除整个Canvas。 4. 在Canvas上重新绘制保留的线条。 以下是示例代码： ```javascript // 获取Canvas元素 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // 创建一个保存线条的数组 var linesToKeep = []; // 绘制所有要保留的线条 function drawLinesToKeep() { for (var i = 0; i < linesToKeep.length; i++) { var line = linesToKeep[i]; context.beginPath(); context.moveTo(line.startX, line.startY); context.lineTo(line.endX, line.endY); context.stroke(); } } // 清除特定线条 function clearSpecificLine(lineToRemove) { // 将要保留的线条保存到数组中 for (var i = 0; i < linesToKeep.length; i++) { var line = linesToKeep[i]; if (line !== lineToRemove) { linesToKeep.push(line); } } // 清除整个Canvas context.clearRect(0, 0, canvas.width, canvas.height); // 在Canvas上重新绘制保留的线条 drawLinesToKeep(); } // 示例用法 var line1 = { startX: 50, startY: 50, endX: 200, endY: 200 }; var line2 = { startX: 100, startY: 100, endX: 300, endY: 100 }; // 绘制线条 context.beginPath(); context.moveTo(line1.startX, line1.startY); context.lineTo(line1.endX, line1.endY); context.stroke(); context.beginPath(); context.moveTo(line2.startX, line2.startY); context.lineTo(line2.endX, line2.endY); context.stroke(); // 清除第一条线条 clearSpecificLine(line1); ``` 在上面的示例中，我们首先绘制了两条线条，然后使用`clearSpecificLine`函数清除了第一条线条。你可以根据需要调整和扩展这个示例来清除Canvas上的其他特定线条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值