下载文档原格式
CAD中的等距绘图技巧CAD（计算机辅助设计）是一种广泛应用于工程和建筑设计领域的软件。
在CAD中，等距绘图是一项非常重要的技巧，它可以帮助设计师以更直观和准确的方式绘制图纸。
下面将介绍几种在CAD中使用的等距绘图技巧。
首先，我们来了解一下等距绘图的概念。
等距绘图是以等角投影的方式绘制图纸，使得所有的长度、角度和比例都保持一致。
这种绘图方法可以使得图纸更易于理解和测量，具有很高的可读性。
在CAD软件中，实现等距绘图的方法有很多。
其中之一是使用等距虚线工具。
在CAD软件的绘图工具中，通常会有一个等距虚线工具，可以帮助我们简单地绘制等距线段。
通过选择等距虚线工具，我们可以直接绘制等距线段，而无需手动计算和绘制。
另一种常用的等距绘图方法是使用等距网格。
等距网格是CAD软件中的一种辅助工具，可以在绘图区域中生成一组等距的水平和垂直线条。
通过使用等距网格，我们可以方便地对绘图进行定位和测量。
例如，我们可以将每个格子定义为等距距离，然后使用这个距离作为基准来绘制图形。
除了上述方法，我们还可以使用CAD软件中的等距绘图命令。
在CAD软件中，通常会有专门的等距绘图命令，可以帮助我们更快速地实现等距绘图。
通过选择等距绘图命令，我们可以按照指定的等距比例绘制图形，而无需手动调整和计算。
当然，在进行等距绘图时还需要注意一些细节。
首先，我们需要选择合适的等距比例。
根据实际需求和绘图的尺寸，选择合适的等距比例可以使得图纸更易于理解和测量。
其次，我们还需要确保绘制的图形符合等距要求。
在进行绘图时，我们需要注意角度和长度的准确度，以保证图纸的等距性。
综上所述，等距绘图是CAD软件中的一项重要技巧。
通过使用等距虚线工具、等距网格或等距绘图命令，我们可以更方便和准确地绘制等距图纸。
在进行等距绘图时，我们还需要注意选择合适的比例和确保图形的准确度。
掌握这些等距绘图技巧，可以使我们在CAD设计中更加高效和精确。
canvas默认宽高是300、150，为避免异常，最好使用显示属性添加而不通过css来添加宽高，下面简单的为大家介绍下canvas使用注意事项，感兴趣的朋友可以参考下哈，希望对大家有所帮助1、canvas中文教程https:///zh-CN/docs/Canvas_tutorial2、canvas默认宽高是300、150，为避免异常，最好使用显示属性添加而不通过css来添加宽高3、在canvas标签内部添加不支持canvas标签的浏览器的说明4、通过下面的js代码也能判断浏览器是否支持canvas代码如下:var canvas = document.getElementById('tutorial');if (canvas.getContext){var ctx = canvas.getContext('2d');// drawing code here} else {// canvas-unsupported code here}5、canvas只支持一种基本形状的绘制，即矩形，但是其它图形都可以通过canvas路径来绘制6、绘制矩形有四个函数：rect、fillRect、strokeRect和clearRect7、beginPath的作用用来开始一个新的路径层，如果不加就表示在原来路径层上绘制，下面两段代码效果是完全不一样的，第一段代码显示两条红线，第二段代码显示一条黑线和一条红线代码如下:var ctx = document.getElementById('cvs').getContext('2d');ctx.beginPath();ctx.moveTo(100.5,20.5);ctx.lineTo(200.5,20.5);ctx.stroke();ctx.moveTo(100.5,40.5);ctx.lineTo(200.5,40.5)ctx.strokeStyle = '#f00';ctx.stroke();代码如下:var ctx = document.getElementById('cvs').getContext('2d');ctx.beginPath();ctx.moveTo(100.5,20.5);ctx.lineTo(200.5,20.5);ctx.stroke();ctx.beginPath();ctx.moveTo(100.5,40.5);ctx.lineTo(200.5,40.5)ctx.strokeStyle = '#f00';ctx.stroke();8、如果不需要路径闭合，closePath可以不用，如果使用了fill则路径则会自动闭合，不需要再使用closePath了9、只要有足够的耐性是完全可以利用贝塞尔曲线绘制任何图形的10、二次方曲线在火狐下存在bug，因此可以利用三次方曲线代替二次方曲线使用11、图像（如PNG，GIF，JPEG等）都可以引入到canvas 中，而且其它的canvas 元素也可以作为图像的来源12、下面是基本的canvas图片绘制代码，其中image 是image 或者canvas 对象，x 和y 是其在目标canvas 里的起始坐标drawImage(image, x, y)下面一段代码表示缩放图片，width和height表示缩放的尺寸drawImage(image, x, y, width, height)下面一段代码表示剪切图片，第一个参数和其它的是相同的，都是一个图像或者另一个canvas 的引用。
让我们来探讨一下NSTextAttachment。
NSTextAttachment是iOS 中用于在文本中插入图像的类。
它是NSAttributedString的子类，可以将图像或其他附件嵌入到文字中，从而实现丰富的文本排版效果。
在使用NSTextAttachment时，我们常常会遇到一个问题，那就是插入的图像与文字之间的间距。
1. 了解NSTextAttachment在深入讨论间距问题之前，我们先来了解一下NSTextAttachment的基本用法和特点。
NSTextAttachment可以通过NSAttributedString 的方法来插入到文本中，它可以包含图像、图片、甚至是自定义的UIView。
通过NSTextAttachment，我们可以实现富文本中的图文混排效果，让文本内容更加生动和具有吸引力。
2. NSTextAttachment 间距问题分析插入NSTextAttachment之后，我们常常会发现图像与文字之间的间距并不是我们期望的效果。
这个间距问题可能会导致排版不美观，影响到用户的阅读体验。
在iOS开发中，如何处理NSTextAttachment 的间距成为了一个值得深入研究的问题。
3. 解决NSTextAttachment 间距问题的方法针对NSTextAttachment间距问题，我们可以采取多种方法来解决。
其中，最常见的方法是通过调整NSTextAttachment的bounds和baselineOffset属性来控制图像与文字之间的相对位置。
另外，我们还可以通过修改NSAttributedString的排版属性和自定义绘制方式来实现对间距的精细控制。
4. 个人观点和理解在实际开发中，我认为处理NSTextAttachment的间距问题并不是一件容易的事情。
它涉及到文本排版、图形绘制和用户交互等多个方面，需要开发者具备丰富的经验和技巧。
我也认为这个问题的解决对于提升App的用户体验和视觉吸引力非常重要，因此值得花费时间去深入研究和实践。
canvas画布基本知识点总结HTML5的canvas元素使⽤JavaScript画图；<canvas width="600" height="400"> </canvas>画图的基本框架画布默认背景颜⾊为⽩⾊，⼤⼩为300*150；若要设置画布⼤⼩，不建议在style的样式设置尺⼨,效果相当于将原本300*150的画布等⽐例放⼤缩⼩，包括⾥⾯画的图；建议在元素本⾝设置；<body><!-- 准备画布 --><canvas width="600" height="400"></canvas><!-- 准备绘制⼯具 --><!-- 利⽤⼯具绘图 --><script>// 获取元素var myCanvas=document.querySelector('canvas');// 获取上下⽂,绘制⼯具箱var ctx=myCanvas.getContext('2d');// 移动画笔ctx.moveTo(100,100);// 绘制直线（轨迹，绘制路径）ctx.lineTo(200,100);// 描边ctx.stroke();</script></body>关于线条的问题1. 默认宽度为1px2. 默认颜⾊⿊⾊3. 但是显⽰是灰⾊，2px宽度，原因是对其点是线的中⼼位置，会把线分成两个0.5px，显⽰的会是不饱和增加宽度；4. 解决⽅法：前或后移动0.5px即可；当要画多条不同样式的平⾏线时，存在样式覆盖问题，需要开辟新路径；<body><canvas width="600" height="400"></canvas><script>var myCanvas=document.querySelector("canvas");var ctx=myCanvas.getContext("2d");// 画平⾏线// 蓝⾊ 10pxctx.moveTo(100,100);ctx.lineTo(200,100);ctx.strokeStyle="blue";ctx.lineWidth=10;ctx.stroke();// 红⾊ 20pxctx.beginPath();//开辟新路径ctx.moveTo(100,200);ctx.lineTo(200,200);ctx.strokeStyle="red";ctx.lineWidth=20;ctx.stroke();// 绿⾊ 30pxctx.beginPath();//开辟新路径ctx.moveTo(100,300);ctx.lineTo(200,300);ctx.strokeStyle="green";ctx.lineWidth=30;ctx.stroke();</script></body>当绘制图形，需要填充颜⾊时，使⽤fill()函数；默认填充颜⾊为⿊⾊；<body><canvas width="600" height="400"></canvas><script>var myCanvas = document.querySelector("canvas");var ctx = myCanvas.getContext("2d");// 绘制⼀个三⾓形ctx.moveTo(100,100);ctx.lineTo(200,100);ctx.lineTo(200,200);ctx.lineTo(100,100);// 描边ctx.stroke();// 填充ctx.fill();</script></body>当绘制封闭图形时，会出现起始点和lineTo的结束点⽆法完全闭合，有缺⾓解决⽅法：使⽤canvas的⾃动闭合路径closePath()；<canvas width="600" height="400"></canvas><script>var myCanvas = document.querySelector("canvas");var ctx = myCanvas.getContext("2d");// 绘制⼀个三⾓形ctx.moveTo(100,100);ctx.lineTo(200,100);ctx.lineTo(200,200);// 起始点和lineTo的结束点⽆法完全闭合，有缺⾓；// ctx.lineTo(100,100);// 使⽤canvas⾃动闭合ctx.closePath();ctx.lineWidth=10;// 描边ctx.stroke();</script>填充规则（⾮零环绕）看⼀块区域是否被填充，从区域画⼀条直线，看和这条直线相交的轨迹；如果是顺时针就+1，逆时针就-1；计算所有轨迹的和，如果⾮0就填充，是0就不填充；如上图1区域：轨迹和为1，填充；2区域：轨迹和为2，填充；3区域：轨迹和为0，不填充；画虚线<script>var myCanvas = document.querySelector("canvas");var ctx = myCanvas.getContext("2d");// 画线ctx.moveTo(100.5, 100.5);ctx.lineTo(300, 100.5);ctx.setLineDash([5,10,15]);ctx.stroke();</script>画虚线：通过数组描述虚线的排列⽅式；获取虚线的排列⽅式，获取的是不重复的那⼀段的排列⽅式；例如：console.log(ctx.setLineDash());获取的是5 10 15 5 10 15;括号⾥数字为[数字长度，空格长度，数字长度，空格长度…]；画渐变矩形（例如⿊⽩渐变）主要利⽤for循环，逐渐改变线条颜⾊，矩形通过多个线条拼凑；<body><canvas width="600" height="400"></canvas><script>var myCanvas = document.querySelector("canvas");var ctx = myCanvas.getContext("2d");// 绘制⼀个矩形// ctx.moveTo(100, 100);// ctx.lineTo(255,100);// ctx.lineWidth='30';// // 颜⾊填充// ctx.strokeStyle='#fff';// // 从⿊到⽩// ctx.stroke();// 线是由点构成的ctx.lineWidth = '30';//起始位置// ctx.moveTo(100, 100);for (var i = 0; i < 255; i++) {//画255条1px长的线；//每次开辟⼀条新路径，不然会样式覆盖ctx.beginPath();//起始位置ctx.moveTo(100 + i - 1, 100);//结束位置ctx.lineTo(100 + i, 100);ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';//描边ctx.stroke();}</script></body>⽹格、坐标系、点的绘制⽹格即多条线按⼀定的规则排列组成；坐标系绘制两条相互垂直的有向线段，箭头⾃⼰计算画三⾓形，进⾏填充即可；点的绘制需要注意的是，点的坐标要先定下来，⽤对象存储点的绘制就是以点的坐标为中⼼，绘制⼀个正⽅形，进⾏填充，点的⼤⼩可以控制；<body><canvas width="600" height="400"></canvas><script>var myCanvas = document.querySelector('canvas');var ctx = myCanvas.getContext('2d');//绘制点//点的尺⼨//以坐标中⼼绘制点//点坐标var coordinate = {x: 146,y: 357}//点尺⼨var dottedSize = 6;ctx.moveTo(coordinate.x - dottedSize / 2, coordinate.y - dottedSize / 2);ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y - dottedSize / 2);ctx.lineTo(coordinate.x + dottedSize / 2, coordinate.y + dottedSize / 2);ctx.lineTo(coordinate.x - dottedSize / 2, coordinate.y + dottedSize / 2);ctx.closePath();ctx.fill();</script></body>图形绘制参数（x，y）为坐标，（w，h）为宽⾼；弧度绘制什么是弧度？⼀种长度的描述单位，⼀个圆有2Π个弧度，⼀个⾓度等于Π/180弧度<body><canvas width="600" height="400"></canvas><script>var myCanvas = document.querySelector('canvas');var ctx = myCanvas.getContext('2d');//绘制圆弧//1.确定圆⼼//2.确定圆的半径//3.确定起始位置和结束位置，确定圆弧长度和位置//4.确定绘制⽅向（⼀般是默认的顺时针）directionvar w=ctx.canvas.width;var h=ctx.canvas.height;//在中⼼位置画⼀个半径150px的圆弧右下⾓（横坐标，纵坐标，半径，起始⾓度，结束⾓度）ctx.arc(w/2,h/2,150,0,Math.PI/2);ctx.stroke();</script></body>绘制扇形时，圆⼼的确定要放在的前⾯；绘制⽂本ctx.font='微软雅⿊’设置字体；strokeText(text,x,y,maxWidth);fillText(text,x,y,maxWidth);text即要绘制的⽂本；x,y为⽂本绘制的坐标（⽂本左下⾓）；maxWidth设置⽂本的最⼤宽度，可选参数；ctx.textAlign⽂本⽔平对齐⽅式，相对绘制坐标来说；可取值有 left center right start默认 endctx.direction属性css(rtl ltr)start和end与此相关；若为ltr则start和left表现⼀致；若为rtl则start和right表现⼀致；ctx.textBaseline设置基线（垂直对齐⽅式）；top⽂本的基线处于⽂本的正上⽅，并且有⼀段距离；middle⽂本的基线处于⽂本的正中间bottom⽂本的基线处于⽂本的正下⽅，并且有⼀段距离；hanging⽂本的基线处于⽂本的正上⽅，并且与⽂本粘合；alphabetic默认值，⽂本的基线处于⽂本的正下⽅，并且穿过⽂字；ideographic和bottom相似，但是不⼀样；measureText()获取⽂本的宽度obj.width；注意⽂本样式设置要在⽂本描边或者填充之前；左右对齐⽅式的对齐基准是⽂字描绘的起始坐标；图⽚绘制drawImage()三个参数drawImage( image, x , y);1. img图⽚对象、canvas对象、video对象2. x,y图像绘制的左上⾓五个参数drawImage( image, x , y , w, h);w，h分别为图形的宽⾼设置，是缩放，不是截取，其余参数意义同上；九个参数drawImage( image, x , y , w , h, x1, y1 ,w1, h1);image是图⽚对象，x,y是图⽚定位的坐标（即原图⽚上图⽚从哪开始截取），w,h是在原图⽚上的图⽚截取区域⼤⼩，x1,y1是绘制在画布上的坐标，w1,h1是绘制图⽚的⼤⼩，绘制的图⽚不是裁剪⽽是前⾯截取图⽚的缩放的2d转换移动， translate（x,y）；移动的是坐标轴，不是绘制的内容缩放，scale（0.5,1），表⽰横坐标缩放0.5倍，纵坐标缩放1倍，缩放的是坐标轴，不是绘制的内容旋转，rotate()，旋转中⼼默认是坐标原点；。
详解通过HTML5Canvas实现图⽚的平移及旋转变化的⽅法平移变换translate()平移变换，故名思议，就是⼀般的图形位移。
⽐如这⾥我想将位于（100，100）的矩形平移⾄（200，200）点。
那么我只要在绘制矩形之前加上context.translate(100,100)即可。
这⾥的translate()只传⼊两个参数，其实就是新画布坐标系原点的坐标。
下⾯结合代码来看看效果。
XML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html lang="zh">3. <head>4. <meta charset="UTF-8">5. <title>平移变换</title>6. <style>7. body { background: url("./images/bg3.jpg") repeat; }8. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }9. </style>10. </head>11. <body>12. <div id="canvas-warp">13. <canvas id="canvas">14. 你的浏览器居然不⽀持Canvas？！赶快换⼀个吧！！15. </canvas>16. </div>17.18. <script>19. window.onload = function(){20. var canvas = document.getElementById("canvas");21. canvas.width = 800;22. canvas.height = 600;23. var context = canvas.getContext("2d");24. context.fillStyle = "#FFF";25. context.fillRect(0,0,800,600);26.27. context.fillStyle = "#00AAAA";28. context.fillRect(100,100,200,100);29.30. context.fillStyle = "red";31. context.translate(100,100);32. context.fillRect(100,100,200,100);33.34. };35. </script>36. </body>37. </html>运⾏结果：这⾥的蓝⾊矩形，是矩形原来的位置，然后调⽤translate()⽅法，将矩形位移⾄（200，200），即红⾊矩形的位置。
解决图⽚间间距的⼏种⽅法当我们使⽤多个img标签时就会遇到img⾃带间距的问题如下解决这个问题很多种⽅法，下⾯来简单说⼀下1.如果只想解决解决竖向的间距只需⽤vertical-align这个属性就可以了img{vertical-align: top;}或者给img标签的⽗元素加上line-height属性div{line-height: 0;}如果图⽚很宽⼀个就占⼀⾏的画，⽐如移动端的长图，给图⽚加display:block;就可以了；2.如果只想解决左右的间距问当然可以把四周的间距都取消，然后加margin或者padding，但在⽹上发⾏有朋友在img标签左右加上注释包裹，亲测有效果<img src="./temimage.jpg" alt=""><!----><img src="./temimage.jpg" alt=""><!----><img src="./temimage.jpg" alt=""><!----><img src="./temimage.jpg" alt=""><!----><img src="./temimage.jpg" alt=""><!----><img src="./temimage.jpg" alt=""><!----><img src="./temimage.jpg" alt=""><!----><img src="./temimage.jpg" alt="">或者将所有标签并排写，这种写法颜值太低了，也不易读不推荐了<img src="./temimage.jpg" alt=""><img src="./temimage.jpg" alt=""><img src="./temimage.jpg" alt="">3.最后当然就是清除全部的间距了 可以给图⽚加上浮动属性img{float: left;} 可以给⽗元素加上font-sizediv{font-size:0;}//font-size如果给值的话图⽚的间距就会变成这个值，所以要个加⽂本的时候就要单独定义⽂本的font-size了 ⽗元素⽤flex，div{display: flex;flex-wrap: wrap;}。
⼀步步教你利⽤Canvas对图⽚进⾏处理前⾔Canvas，中⽂译为“画布”，HTML5中新增了<canvas>元素，可以结合JavaScript动态地在画布中绘制图形。
今天，我们不讲Canvas的图形绘制，⽽是讲如何对图⽚进⾏处理，话不多说了，来⼀起看看详细的介绍吧。
⼤概流程⾮常简单，主要分为以下三个步骤：Canvas图⽚处理是的，就像把⼤象装进冰箱⼀样简单，哈哈。
⼀、主要API整个流程中所⽤到的主要Canvas API有：绘制图像：drawImage()获取图像数据：getImageData()重写图像数据：putImageData()导出图像：toDataURL()1. drawImage()顾名思义，该⽅法就是⽤于将图像绘制与Canvas画布当中，具体⽤法有三种：①在画布上定位图像：context.drawImage(img,x,y)②在画布上定位图像，并规定图像的宽度和⾼度：context.drawImage(img,x,y,width,height)③剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)以上参数值描述如下表：参数描述img规定要使⽤的图像、画布或视频。
sx可选。
开始剪切的 x 坐标位置。
sy可选。
开始剪切的 y 坐标位置。
swidth可选。
被剪切图像的宽度。
sheight可选。
被剪切图像的⾼度。
x在画布上放置图像的 x 坐标位置。
y在画布上放置图像的 y 坐标位置。
width可选。
要使⽤的图像的宽度。
（伸展或缩⼩图像）height可选。
要使⽤的图像的⾼度。
（伸展或缩⼩图像）2. getImageData()该⽅法⽤于从Canvas画布中获取图像数据，具体⽤法如下：获取画布指定矩形范围内的像素数据：var ImageData = context.getImageData(x,y,width,height)以上参数值描述如下表：参数描述x开始复制的左上⾓位置的 x 坐标。
vue中canvas画布运用技巧vue中canvas画布运用技巧1. 简介在Vue中使用canvas画布可以实现各种丰富的图形和动画效果。
本文将介绍一些在Vue中使用canvas时的技巧和注意事项。
2. 了解Vue的生命周期在使用canvas时，我们需要了解Vue的生命周期钩子函数，特别是created和mounted。
created钩子函数在实例被创建之后立即调用，而mounted钩子函数在Vue实例挂载到DOM元素之后调用。
我们可以在created钩子函数中初始化canvas画布，并在mounted 钩子函数中开始绘制图形或动画。
3. 创建并初始化canvas画布在Vue组件中，我们可以使用`refs`来引用DOM元素。
在模板中，我们可以通过`<canvas ref="canvas"></canvas>`来创建一个canvas元素，并将其引用为`canvas`。
在created钩子函数中，我们可以通过`this.$refs.canvas`来获取canvas DOM元素，并将其存储为一个实例变量。
我们可以使用canvas的`getContext()`方法来获取绘图上下文，并进行一些初始化操作，比如设置画笔的颜色、宽度等。
4. 绘制基本图形对于基本图形，我们可以使用绘图上下文的方法来绘制，如`fillRect()`绘制矩形、`arc()`绘制圆弧等。
在Vue中，我们可以在mounted钩子函数中使用绘图上下文来绘制各种基本图形。
可以根据需求，进行相应的样式设置，比如填充颜色、边框宽度等。
5. 动画效果在Vue中实现canvas动画效果有多种方式，比如使用`requestAnimationFrame()`方法、使用`setInterval()`方法等。
通过控制绘图上下文的绘制频率，我们可以实现平滑的动画效果。
在Vue 中，建议使用`requestAnimationFrame()`方法来进行动画绘制，因为它会在每个浏览器刷新时调用，以提供较好的性能和动画效果。
图⽚在canvas中的选中平移缩放旋转，包含了所有canvas的2D变化，让你认识到数学的重要性1、介绍 canvas 已经出来好久了，相信⼤家多少都有接触。
如果你是前端页⾯开发/移动开发，那么你肯定会有做过图⽚上传处理，图⽚优化，以及图⽚合成，这些都是可以⽤ canvas 实现的。
如果你是做前端游戏开发的，可能会⾮常熟悉，或者说对⼏何和各种图形变化⾮常了解。
这⾥我介绍的是简单的、基本的，但是⾮常完全的⼀个 2d 的 canvas 案例。
基本上了解了这些，所有的 canvas 中的 2d 变化基本都可以会了。
先来⼀个截图看看效果： 如上⾯所看，可以总结出⼏个功能点： 1、添加多张图⽚或者⽂字到 canvas 。
( 这⾥没有添加⽂字，我们可以先把⽂字利⽤canvas转为图⽚，然后添加 canvas 上 ) 2、图⽚的缩放，根据选择不同的点实现不同缩放 3、图⽚移动，改变图⽚在 canvas 的中⼼位置 4、图⽚旋转，根据旋转点在移动的⾓度进⾏旋转 5、图⽚选择，两种⽅式：⼀种根据图⽚的位置，确定当前选择的图形，第⼆种是点击列表选择 6、数据的保存，提供了保存按钮，保存图形的位置和⼤⼩以及旋转⾓度 7、初始化数据，通过之前保存的数据，重新绘制。
代码案例介绍： html 代码：<canvas height="960" width="960" style="width: 100%;" id="test"></canvas><div id="list"></div><button id="save">保存</button> js代码是模块形式开发的，并且传到 npm 上⾯，可以⾃⾏下载并且有源码：yarn add xl_canvas 代码调⽤和实现：import Canvas from 'xl_cnavas';const dataCa = sessionStorage.getItem('test_tst_111');const canvas = new Canvas({list: 'list',height: 960,width: 960,data: dataCa?JSON.parse(dataCa):[],});document.getElementById('save').addEventListener('click', () => {sessionStorage.setItem('test_tst_111',JSON.stringify(canvas.save()));});// canvas.addPhoto('https://cdn.eoniq.co/spree/images/283205/desktop/CI-26-LS_b6bb28a3914ae9caa651abbddb548054.jpg?1533196945'); // canvas.addPhoto('/wp-content/uploads/2013/11/img_the_scream.jpg'); npm 包没有测试，本地的可以实现各种⽅法了。
使用Canvas实现图形编辑与操作功能Canvas是一个HTML5的元素，它可以用来在网页上绘制图形，包括线条、填充颜色和渐变色、文字等。
通过对Canvas的操作，我们可以实现丰富的图形编辑和操作功能，为用户提供更好的视觉体验。
一、绘制基本图形在Canvas中，我们可以使用诸如fillRect、strokeRect等方法来绘制基本的图形，比如矩形。
通过指定矩形的位置、宽度和高度，我们可以在Canvas上绘制出一个矩形，并选择填充颜色或边框的颜色。
除了矩形，我们还可以使用诸如绘制圆形、直线、多边形等方法来实现更多的图形绘制。
通过指定对应的参数，我们可以绘制出各种形状的图形，并对其进行填充或描边。
二、图形变换与动画效果Canvas还提供了图形变换的功能，通过使用translate、rotate和scale等方法，我们可以实现平移、旋转和缩放等效果。
例如，我们可以将一个矩形图形做平移后，再进行旋转和缩放，从而实现复杂的图形变换效果。
除了图形变换，Canvas还可以用来实现图形的动画效果。
通过使用setInterval或requestAnimationFrame等方法，我们可以定时调用绘制图形的函数，从而实现图形的动态变化。
例如，我们可以让一个圆形在Canvas上做往返运动，给用户带来生动而有趣的视觉体验。
三、实现图形编辑功能Canvas不仅可以用于绘制图形，还可以用于实现图形编辑的功能。
比如，我们可以使用鼠标事件来实现图形的选择和拖动功能。
通过监听鼠标的mousedown、mousemove和mouseup事件，我们可以实现在Canvas上选择一个图形并进行拖动的效果。
除了选择和拖动，我们还可以使用鼠标事件来实现图形的缩放和旋转功能。
通过计算鼠标的滚轮事件或拖动事件的距离，我们可以对选中的图形进行缩放或旋转的操作，实现图形的形变效果。
四、实现图像编辑功能除了图形，Canvas还可以用于图像的编辑和操作。
Canvas保持图片之间等距技巧总结
在用Canvas作图时
图片与图片之间的对齐很容易通过这个“Align”这个功能来完成但是对于图片与图片之间等间距就很难保证了
对于有强迫症的用户来说
可能一眼就能看出来他们没有等距
所以我们这个时候就有必要
引入“Rulers”来辅助我们作图
首先将“Rulers”选项勾选上
在水平和竖直方向就会出现标尺如下图
接下来，你就可以将鼠标定位到标尺处
鼠标会变成双箭头，如下图所示
按住左键不放
按住左键不放
按住左键不放
往下拖（或者往右拖），就会出现“Guides”
同时“Guides”就会被自动勾选上
接下来，你需要做的就是
“无限放大”
“无限放大”
“无限放大”
然后控制每两个“Guide line”间距相同即可
通过这样此番操作
你的图片与图片之间的间距
就会高度一致
PS：如果你不想看到“Guide line”，取消勾选“Guides”
“Guide line”拖出来多了，可以拖回标尺处删除。
