整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html5 SVG动画&路径
SVG动画可以使用<animate>元素创建
实例:
创建一个矩形,将在3秒内更改其位置,然后重复动画两次
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2" />
</rect>
</svg>
attributeName:指定哪个属性需要产生动画效果
from:指定属性的起始值
to:指定属性的结束值
dur:指定动画运行的时间(持续时间)
fill="frezee|remove":指定动画播放完毕后是停留在播放的终点还是回到起始位置
repeatCount:指定动画的重复播放次数
在上面的例子中,矩形在3s内将其x属性从0更改为300
●要无限重复动画,请使用值"indefinite"作为repeatCount属性
<path>元素用于定义一个路径
下面的命令可用于路径数据:
●M=moveto
●L=lineto
●H=horizontal lineto
●V=vertical lineto
●C=curveto
●S=smooth curveto
●Q=quadratic Bezier curve
●T=smooth quadratic Bezier curveto
●A=elliptical Arc
●Z=closepath
注意:以上所有命令均允许小写字母.大写字母表示绝对定位,小写字母表示相对定位
实例:
<svg width="500" height="500">
<path d="M50 0 L75 200 L225 200 Z"/>
</svg>
上面的例子中定义了一条路径,它开始于150 0,到达位置75 200,然后从那里开始到225 200,最后150 0关闭路径
二 html5 Canvas
html5<canvas>元素用于图形的绘制,通过脚本(通常是JavaScript)来完成
<canvas>标签只是图形容器,你必须使用脚本来绘制图形
getContext()方法可返回一个对象,该方法提供了用于在画布上绘画的方法和属性.
你可以通过多种方法使用canvas绘制路径,盒,圆,字符以及添加图像
<canvas>元素定义如下:
<canvas id"myCanvas" width="200" height="100">
</canvas>
<canvas>标签通常需要指定一个id属性(脚本中经常使用),width和height属性定义的画布的大小
了解和使用Canvas需要基本了解JavaScript的基本知识
canvas是一个二维坐标
canvas的左上角坐标为(0,0)
x坐标向右增加
y坐标向着画布底部增加
Canvas-路径
在Canvas上画线,我们将使用以下两种方法:
●moveTo(x,y)定义线条开始坐标
●lineTo(x,y)定义线条结束坐标
在canvas中绘制圆形,我们将使用以下方法:
●arc(x,y,start,stop)
Canvas-文本
使用canvas绘制文本,重要的属性和方法如下:
●font-定义字体
●fillText(text,x,y)-在canvas上绘制实心的文本
●strokeText(text,x,y)-在canvas上绘制空心的文本
Canvas-渐变
渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以自己定义不同的颜色
以下有两种不同的方式来设置canvas渐变:
●creatLinearGradient(x,y,x1,y1)-创建线条渐变
●creatRadialGradient(x,y,r,x1,y1,r1)-创建一个径向/圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色
addColorStop()方法指定颜色停止,参数使用坐标描述,可以是0至1
使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线
Canva-图像
把一幅图像放置在画布上,使用以下方法:
●drawImage(image,x,y)
三 html5 SVG与Canvas的区别
SVG:
SVG是一种使用XML描述2D图形的语言
SVG基于XML,这意味着SVG DOM中的每个元素都是可用的.你可以为某个元素附加JavaScript事件处理器
在SVG中,每个被绘制的图形均被视为对象.如果SVG对象的属性发生改变,那么浏览器能够自动重现图形
特点:
●不依赖分辨率
●支持事件处理器
●最适合带有大型渲染区域的应用程序(比如谷歌地图)
●复杂程度高会减慢渲染速度(任何过度使用DOM的应用都不快)
●不适合游戏应用
Canvas:
canvas通过JavaScript来绘制2D图形
canvas可以逐像素进行渲染的
在canvas中,一旦图形被绘制出来,它就不会继续得到浏览器的关注
如果其位置发生变化,那么整个场景也需要重新启动,包括任何或许已被图像覆盖的对象
特点:
●依赖分辨率
●不支持事件处理器
●弱的文本渲染能力
●能够以.png或.ipg格式保存结果图像
●最适合图像密集型的游戏,其中的许多对象都会被频换重绘
85条高级AutoCAD工程师绘图技巧 1.如何替换找不到的原文字体？
2.如何删除顽固图层？
5.在 Word文档中插入 AutoCAD图形的发法。
7.将AutoCAD中的图形插入WORD时线宽问题。 11.在多行文字（ mtext）命令中使用 Word97编辑文本。 键入REINIT命令，钩选PGP，再确定 14.从备份文件中恢复图形
去掉文件和文件夹的隐藏性。 删除 C:\Documents and Settings\All Users\Application Data\Autodesk\Software Licenses\B2260000.dat 16.acad.pgp文件的修改
点工具——选项——配置——重置；也可用命令MENULOAD，然后点击浏览，选择ACAD.MNC加载即可。 18.如何关闭CAD中的*BAK文件？
（2）也可以用命令ISAVEBAK,将ISAVEBAK的系统变量修改为0，系统变量为1时，每次保存都会创建“*BAK”备份文件。
按F6键切换。或者将COORDS的系统变量修改为1或者2。系统变量为0时，是指用定点设备指定点时更新坐标显示。系统变量为1时，是指不断更新坐标显示。系统变量为2时，是指不断更新坐标显示，当需要距离和角度时，显示到上一点的距离和角度。 20.绘图时没有虚线框显示怎么办？ 修改系统变量DRAGMODE，推荐修改为AUTO。系统变量为ON时，再选定要拖动的对象后，仅当在命令行中输入DRAG后才在拖动时显示对象的轮廓；系统变量为OFF时，在拖动时不显示对象的轮廓；系统变量位AUTO时，在拖动时总是显示对象的轮廓。 21.选取对象时拖动鼠标产生的虚框变为实框且选取后留下两个交叉的点怎么办？ 将BLIPMODE的系统变量修改为OFF即可。 22.命令中的对话框变为命令提示行怎么办？ 将CMDDIA的系统变量修改为1。系统变量为0时，为命令行；系统变量为1时，为对话框。 23.如何给AutoCAD工具条添加命令及相应图标？
用BLIPMODE命令，在提示行下输入OFF可消除它。 26.怎样控制命令行回显是否产生？ 将CMDECHO系统变量改为0或1。 27.快速查出系统变量的方法？ 要记住多达两三百个变量有一定难度，可以用以下方法查出是哪个变量出了差错。为叙述方便，将有问题的文件命名为文件1，新建一个文件命名为文件2（昀好新建，因为那样所有变量都是默认值，也可以用没问题的文件），分别在两文件中运行SETVAR，然后选？列出变量，将变量拷到Excel，比较变量中哪些不一样，这样可以大大减少查询变量的时间。举例：假设一个图其中变量ANGBASE设为90，那若用程序生成文本的话，所有文本中的字都会旋转90。现用setvar命令将变量列出，然后将所有变量复制－粘贴到一个Excel文件B列。新建一个文件，再用setvar命令将变量列出，将所有变量复制－粘贴到Excel文件A列，在Excel文件文件C1格输入“＝IF(A1=B1,0,1)”下拉单元格算出所有行的值，然后对C列按递减排列，这样，值不相同的变量就集中在前几列，再分析这些变量，很快就能查出是ANGBASE变量的设置有问题 28.块文件不能炸开及不能用另外一些常用命令的问题。
在AutoCAD中同时保存中英文两套菜单系统，来回切换是可行的。具体作法是把汉化菜单文件改名为Pacad.mnu，放在AutoCAD安装目录下的\SUPPORT子目录中，当然还别忘了将acad.mnl复制成Pacad.mnl，放?*** acad.mnu同一目录中。在用中文菜单时，用menu命令加载Pacad；换回英文菜单时就再次使用menu命令加载acad菜单文件。 30.如何为autocad2004图形设置密码？ 工具—选项—打开和保存按纽—安全选项，设置密码即可，如果取消密码在此把密码删掉即可。 31.标注时使标注离图有一定的距离 执行DIMEXO命令，再输入数字调整距离。 32.如何将图中所有的STANDADN样式的标注文字改为SIMPLEX样式？ 可在ACAD.LSP中加一句：(vl-cmdf ".style" "standadn" "simplex.shx")。 33.重合的线条怎样突出显示？ 可以使用工具——显示顺序功能。 34.如何快速变换图层？ 点取想要变换到的图层中的任一元素，然后点击图层工具栏的-将对象的图层置为当前-即可。 35.在标注文字时，标注上下标的方法： 使用多行文字编辑命令： 上标：输入2^，然后选中2^，点a/b键即可。 打开多行文字编辑器-在输入文字的矩形框里点右键-选符号-其它打开字符映射表-选择符号即可。注意字符映射表的内容取决于用户在“字体”下拉列表中选择的字体。 37.如何用break命令在一点打断对象？ 执行break命令，在提示输入第二点时，可以输入@再回车，这样即可在第一点打断选定对象。 38.使用编辑命令时多选了某个图元如何去掉？ 在命令未结束下按住shift键选择多选的图元即可，很方便的喔。 39.“！”键的使用。 假设屏幕上有一条已知长度的线（指单线、多义线，未知长度当然也可以），且与水平方向有一定的角度，要求将它缩短一定的长度且方向不变，操作过程如下：直接选取该线，使其夹点出现，将光标移动到要缩短的一端并激活该夹点，使这条线变为可拉伸的皮筋线，将光标按该线的方向移动，使皮筋线和原线段重合，移动的距离没有限制，有人觉得移动的方向不能和原来一样那么就用辅助点捕捉命令，输入“捕捉到昀近点（即near命令）”，然后在 “near 到（即near to）”的提示后输入“!XX”(XX为具体数值)后回车，该线的长度就改变了。很放便的呦！！！ 40.图形的打印技巧。
41.质量属性查询。 AutoCAD提供点坐标（ID），距离（Distance），面积（area）的查询，给图形的分析带来了很大的方便，但是在实际工作中，有时还须查询实体质量属性特性，AutoCAD提供实体质量属性查询（Mass Properties），可以方便查询实体的惯性矩、面积矩、实体的质心等，须注意的是，对于曲线、多义线构造的闭合区域，应先用region命令将闭合区域面域化，再执行质量属性查询，才可查询实体的惯性矩、面积矩、实体的质心等属性 42.如何计算二维图形的面积？ 1.对于简单图形，如矩形、三角形。只须执行命令AREA（可以是命令行输入或点击对应命令图标），在命令提示“Specify first corner point or [Object/Add/Subtract]:”后，打开捕捉依次选取矩形或三角形各交点后回车，AutoCAD将自动计算面积（Area）、周长（Perimeter），并将结果列于命令行。 2.对于简单图形，如圆或其它多段线（Polyline）、样条线（Spline）组成的二维封闭图形。执行命令AREA，在命令提示“Specify first corner point or [Object/Add/Subtract]:”后，选择Object选项，根据提示选择要计算的图形，AutoCAD将自动计算面积、周长。 3.对于由简单直线、圆弧组成的复杂封闭图形，不能直接执行AREA命令计算图形面积。必须先使用region命令把要计算面积的图形创建为面域，然后再执行命令AREA，在命令提示“Specify first corner point or [Object/Add/Subtract]:”后，选择Object选项，根据提示选择刚刚建立的面域图形，AutoCAD将自动计算面积、周长。 43.如何设置线宽？
LineWeight线宽是绝对线宽，而多义线线宽是相对线宽，也就是说，无论图形以多大尺寸打印LineWeight线宽都不变，而多义线线宽则随打印尺寸比例大小变化而变化，无论实体被缩放多少倍，LineWeight线宽都不变，而多义线线宽则随缩放比例改变而改变。 45.[TAB]键在AutoCAD捕捉功能中的巧妙利用。 当需要捕捉一个物体上的点时，只要将鼠标靠近某个或某物体，不断的按TAb键，这个或这些物体的某些特殊点（如直线的端点、中间点、垂直点、与物体的交点、圆的四分圆点、中心点、切点、垂直点、交点）就回轮换显示出来，选择需要的点左键单击即可以捕中这些点。注意当鼠标靠近两个物体的交点附近时这两个物体的特殊点将先后轮换显示出来（其所属物体会变为虚线），这对于在图形局部较为复杂时捕捉点很有用。 46.椭圆命令生成的椭圆是多义线还是实体？ 由系统变量 PELLIPSE决定，当其为1时，生成的椭圆是多义线。 47.一些常用快捷键。
---- 在绘制图样时，经常遇到画截交线、相贯线及其他曲线的问题。手工绘制很麻烦，要找特殊点和一定数量一般点，且连出的曲线误差大。用AutoCAD 2000绘制平面曲线或空间曲线却很容易。 ---- 方法一：用Pline命令画2D图形上通过特殊点的折线，经Pedit命令中Fit或Spline曲线拟合，可变成光滑的平面曲线。用3Dpoly命令画3D图形上通过特殊点的折线，经Pedit命令中Spline曲线拟合，可变成光滑的空间曲线。 ---- 方法二：用Solids命令创建三维基本实体（长方体、圆柱、圆锥、球等），再经Boolean（布尔）组合运算：交、并、差和干涉等获得各种复杂实体，然后利用下拉菜单View（视图）/3D Viewpoint（三维视点），选择不同视点来产生标准视图，得到曲线的不同视图投影。 50.在AutoCAD中采用什么比例绘图好？
51.如何在AutoCAD中用自定义图案来进行填充？ 例如：直线AB与四条平行线相交，现在要剪切掉直线AB右侧的部分，执行trim命令，在提示行显示选择对象时选择AB并回车，然后输入F并回车，然后在AB右侧画一条直线并回车，OK了。 53.怎样扩大绘图空间？
word里有对象插入，其中一个就是AutoCAD 图形，插入前别忘了在AutoCAD里把图形的背景颜色改为白色（工具-选项-显示-颜色里面改），否则打出来图形有填充色，看不见图形。 55.命令前加“-”与不加“-”的区别 加“-”与不加“-”在AUTOCAD中的意义是不一样的，加“-”是AUTOCAD2000以后为了使各种语言版本的指令有统一的写法而制定的相容指令。命令前加“-”是该命令的命令行模式，不加就是对话框模式，具体一点说：前面加“-”后，命令运行时不出现对话框模式，所有的命令都是在命令行中输入的，不加“-”命令运行时会出现对话框，参数的输入在对话框中进行。 56.怎样对两个图进行对比检查？ 可以把其中一个图做成块，并把颜色改为一种鲜艳颜色，如黄色，然后把两个图重迭起来，若有不一致的地方就很容易看出来。 57.多段线的宽度问题。 当pline线设置成宽度不为0时，打印时就按这个线宽打印。如果这个多段线的宽度太小，就出不了宽度效果。（如以毫米为单位绘图，设置多段线宽度为10，当你用1：100的比例打印时，就是0.1毫米。）所以多段线的宽度设置要考虑打印比例才行。而宽度是0时，就可按对象特性来设置（与其他对象一样）。 58.在模型空间里画的是虚线，打印出来也是虚线，可是怎么到了布局里打印出来就变成实线了呢？在布局里怎么打印虚线？ 估计是改变了线形比例，同时是采用的“比例到图纸空间”的方法（这是 CAD的默认方法）。在线形设置对话框中把“比例到图纸空间”前的钩去掉。 59．怎样把多条直线合并为一条？ 用 Group命令可以完成。 60.怎样把多条线合并为多段线？ 用 PEDIT命令，此命令中有合并选项。 61.当AUTOCAD发生错误强行关闭后重新启动AUTOCAD时，出现以下现象：文件 ——打开命令无法弹出窗口让选择文件了，输出文件时也类似时怎么办？ 应该修改FILEDIA变量。 62.如何在修改完ACAD.LSP后自动加载？ 可以将ACADLSPASDOC的系统变量修改为1。 63.如何修改尺寸标注的比例？
1.Ctrl+鼠标中键可以实现类似其他软件的游动漫游。 2.双击鼠标中键相当于ZOOM E。 66.多重复制总是需要输入M，如何简化？
AUTOCAD会沿逆时针方向将圆上从第一断点到第二断点之间的那段圆弧删除。 68.如何快速为平行直线作相切半圆？ 用圆角 FILLET 命令，比先画相切圆然后再剪切的作法快10倍。 69.如何快速输入距离？ 在定位点的提示下，输入数字值，将下一个点沿光标所指方向定位到指定的距离，此功能通常在 “正交”或“捕捉”模式打开的状态下使用。例如：执行命令:line；指定第一点: 指定点 ；指定下一点: 将光标移到需要的方向并输入 5，回车即可。 70.如何使变得粗糙的图形恢复平滑？ 有时候图形经过缩放或zoom后，图形会变得粗糙，如圆变成了多边形，可以用重生成命令（regen）来恢复平滑状态。 71.怎样测量某个图元的长度？
工具——选项——显示——十字光标大小，调整就可以了。 73.如何改变拾取框的大小？ 工具——选项——选择——拾取框大小，调整就可以了。 74.如何改变自动捕捉标记的大小？ 工具——选项——草图——自动捕捉标记大小，调整就可以了。 75.复制图形粘贴后总是离的很远怎么办？ 复制时使用带基点复制：点编辑——带基点复制。 76.如何测量带弧线的多线段长度？ 用列表命令（list）！ 77.为什么堆叠按钮不可用？ 堆叠的使用：一是要有堆叠符号（#、^、/）；二是要把堆叠的内容选中后才可以操作。 78.面域、块、实体是什么概念? 面域是用闭合的外形或环创建的二维区域；块是可组合起来形成单个对象(或称为块定义)的对象集合(一张图在另一张图中一般可作为块)；实体有两个概念,其一是构成图形的有形的基本元素,其二是指三维物体.对于三维实体,可以使用"布尔运算"使之联合,对于广义的实体,可以使用"块"或"组(group)"进行"联合"。 79.什么是DXF文件格式？
只有图线和尺寸线，而没有尺寸数值的现成的图纸。这是以前生产中的偷懒做法，现在用计算机制图应该不提倡这样做。 81.底版本的AutoCAD怎样打开高版本的图？ 转换一下，可以用转换软件；或叫发给你的人存为低版本的格式再打开。 82.解决安装cad2002后控制面板中有大块白的现象。 方法如下：打开[开始]-----在[运行]框里输入regedit，打开注册表编辑器，找到下面项 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall\{5783F2D7-0101-0804-0002-0060B0CE6BBA}，修改DisplayIcon，把“AutoCAD 2002安装目录\acad.exe,-1”中的-1，改为1。即可解决控制面板中删除里面有一大块白的现象。 83.如何使图形只能看而不能修改？ 要是自己的图把它全部图层锁定就行了，打开不会变的；如果以后不想用了，就把里面所有东西都炸碎也可以；还有一种方法是用lisp语言写个加密程序，一旦运行后，图就只能看，怎么也改不了了。 84.如何修改尺寸标注的关联性?
文字属性: 改为: 也可以在CAD2004特性里改:对正和方向. |
家好，我是Echa。
创作不易，喜欢的老铁们加个关注，点个赞，后面会持续更新干货，速速收藏，谢谢！
在现在的时代发展中，从以前的手写签名，逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。
举个常用的例子，大家都用过钉钉，钉钉上面就有电子签名，相信大家这肯定是知道的。
那作为前端的我们如何实现电子签名呢？其实在html5中已经出现了一个重要级别的辅助标签，是啥呢？那就是canvas。下面我给大家分享分享几个关于前端如何实现电子签名经典案例以及实现方法。
Canvas（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
大白话就是canvas是一个可以在上面通过javaScript画图的标签，通过其提供的context(上下文)及Api进行绘制，在这个过程中canvas充当画布的角色。
知道几何的朋友都很清楚，线由点绘成，面由线绘成。
多点成线，多线成面。
所以我们实际只需要拿到当前触摸的坐标点，进行成线处理就可以了。
在线预览：https://langyuxiansheng.github.io/vue-sign-canvas/
Github：https://github.com/langyuxiansheng/vue-sign-canvas
vue-sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端,属性支持自定义配置
组件模板使用
<template>
<div id="app">
<h2 class="title">Vue Sign Canvas 电子签名板</h2>
<sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value" />
<img v-if="value" class="view-image" :src="value" width="150" height="150" />
<div class="config">
<ul class="ul-config">
<li class="li-c">
<span class="item-label">书写速度:</span>
<span class="item-content">
<select name="isSign" v-model="options.isSign">
<option :value="true">签名</option>
<option :value="false">写字</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">显示边框/网格:</span>
<span class="item-content">
<select name="isSign" v-model="options.isShowBorder">
<option :value="true">显示</option>
<option :value="false">不显示</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">兼容高倍屏高清绘制:</span>
<span class="item-content">
<select name="isSign" v-model="options.isDpr">
<option :value="true">启用</option>
<option :value="false">关闭</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">边框宽度:</span>
<span class="item-content">
<input v-model="options.borderWidth" type="number" />
</span>
</li>
<li class="li-c">
<span class="item-label">下笔宽度:</span>
<span class="item-content">
<input v-model="options.writeWidth" type="number" />
</span>
</li>
<li class="li-c">
<span class="item-label">图片类型:</span>
<span class="item-content">
<input v-model="options.imgType" type="text" />
</span>
</li>
<li class="li-c">
<span class="item-label">线条的边缘类型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineCap">
<option value="butt">平直的边缘</option>
<option value="round">圆形线帽</option>
<option value="square">正方形线帽</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">线条交汇时边角的类型:</span>
<span class="item-content">
<select name="lineCap" v-model="options.lineJoin">
<option value="bevel">创建斜角</option>
<option value="round">创建圆角</option>
<option value="miter">创建尖角</option>
</select>
</span>
</li>
<li class="li-c">
<span class="item-label">画笔颜色:</span>
<span class="item-content">
<input type="color" v-model="options.writeColor" />
</span>
</li>
<li class="li-c">
<span class="item-label">背景色:</span>
<span class="item-content">
<input type="color" v-model="options.bgColor" />
</span>
</li>
</ul>
</div>
<div class="sign-btns">
<span id="clear" @click="canvasClear()">清空</span>
<span id="save" @click="saveAsImg()">保存</span>
<span id="save" @click="downloadSignImg()">下载</span>
</div>
</div>
</template>
<script>
import SignCanvas from "../packages";
export default {
components: { SignCanvas },
data() {
return {
value: null,
options: {
isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: "bevel", //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 350, //canvas宽高 [Number] 可选
canvasHeight: 370, //高度 [Number] 可选
isShowBorder: true, //是否显示边框 [可选]
bgColor: "#fcc", //背景色 [String] 可选
borderWidth: 1, // 网格线宽度 [Number] 可选
borderColor: "#ff787f", //网格颜色 [String] 可选
writeWidth: 5, //基础轨迹宽度 [Number] 可选
maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选
minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选
writeColor: "#101010", // 轨迹颜色 [String] 可选
isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
imgType: "png", //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的
},
};
},
methods: {
/**
* 清除画板
*/
canvasClear() {
this.$refs.SignCanvas.canvasClear();
},
/**
* 保存图片
*/
saveAsImg() {
const img = this.$refs.SignCanvas.saveAsImg();
alert(`image 的base64：${img}`);
},
/**
* 下载图片
*/
downloadSignImg() {
this.$refs.SignCanvas.downloadSignImg();
},
},
};
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
}
.title {
padding: 20px;
text-align: center;
}
.sign-canvas {
display: block;
margin: 20px auto;
}
.view-image {
display: block;
margin: 20px auto;
}
.config {
width: 350px;
margin: 20px auto;
.ul-config {
.li-c {
display: flex;
align-items: center;
padding: 4px 10px;
.item-label {
font-size: 14px;
}
.item-content {
margin-left: 10px;
}
}
}
}
.sign-btns {
display: flex;
justify-content: space-between;
#clear,
#clear1,
#save {
display: inline-block;
padding: 5px 10px;
width: 76px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}
}
</style><div class="user-sign">
<template v-if="sign">
<img class="sign-image" :src="sign" alt="" srcset="" />
</template>
</div>
<script>
//局部注册
import SignCanvas from "sign-canvas";
import util from "@util";
import { saveSignature } from "@/http";
export default {
name: "UserSign",
components: { SignCanvas },
data() {
return {
sign: null,
};
},
};
</script>
<style lang="scss" scoped>
.user-sign {
background: #e7e7e7;
height: 9.375rem;
position: relative;
.sign-image {
margin: 0 auto;
z-index: 9;
height: 100%;
transform: rotate(-90deg) scale(1.5);
display: block;
}
}
</style>如下图：
在线预览：http://szimek.github.io/signature_pad/
Github：https://github.com/szimek/signature_pad
Signature Pad是一个用于绘制平滑签名的JavaScript库。它基于HTML5画布，使用基于Square发布的Smoother Signatures的可变宽度Bézier曲线插值。它适用于所有现代桌面和移动浏览器，不依赖任何外部库。
核心代码：
const canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas);
// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/jpeg", 0.5); // save image as JPEG with 0.5 image quality
signaturePad.toDataURL("image/svg+xml"); // save image as SVG data url
// Return svg string without converting to base64
signaturePad.toSVG(); // "<svg...</svg>"
signaturePad.toSVG({includeBackgroundColor: true}); // add background color to svg output
// Draws signature image from data URL (mostly uses https://mdn.io/drawImage under-the-hood)
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
// Draws signature image from data URL and alters it with the given options
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...", { ratio: 1, width: 400, height: 200, xOffset: 100, yOffset: 50 });
// Returns signature image as an array of point groups
const data = signaturePad.toData();
// Draws signature image from an array of point groups
signaturePad.fromData(data);
// Draws signature image from an array of point groups, without clearing your existing image (clear defaults to true if not provided)
signaturePad.fromData(data, { clear: false });
// Clears the canvas
signaturePad.clear();
// Returns true if canvas is empty, otherwise returns false
signaturePad.isEmpty();
// Unbinds all event handlers
signaturePad.off();
// Rebinds all event handlers
signaturePad.on();如下图：
完整版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas></canvas>
<div>
<button onclick="cancel()">取消</button>
<button onclick="save()">保存</button>
</div>
</body>
<script>
// 配置内容
const config = {
width: 400, // 宽度
height: 200, // 高度
lineWidth: 5, // 线宽
strokeStyle: 'red', // 线条颜色
lineCap: 'round', // 设置线条两端圆角
lineJoin: 'round', // 线条交汇处圆角
}
// 获取canvas 实例
const canvas = document.querySelector('canvas')
// 设置宽高
canvas.width = config.width
canvas.height = config.height
// 设置一个边框
canvas.style.border = '1px solid #000'
// 创建上下文
const ctx = canvas.getContext('2d')
// 设置填充背景色
ctx.fillStyle = 'transparent'
// 绘制填充矩形
ctx.fillRect(
0, // x 轴起始绘制位置
0, // y 轴起始绘制位置
config.width, // 宽度
config.height // 高度
);
// 保存上次绘制的 坐标及偏移量
const client = {
offsetX: 0, // 偏移量
offsetY: 0,
endX: 0, // 坐标
endY: 0
}
// 判断是否为移动端
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))
// 初始化
const init = event => {
// 获取偏移量及坐标
const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
// 修改上次的偏移量及坐标
client.offsetX = offsetX
client.offsetY = offsetY
client.endX = pageX
client.endY = pageY
// 清除以上一次 beginPath 之后的所有路径，进行绘制
ctx.beginPath()
// 根据配置文件设置相应配置
ctx.lineWidth = config.lineWidth
ctx.strokeStyle = config.strokeStyle
ctx.lineCap = config.lineCap
ctx.lineJoin = config.lineJoin
// 设置画线起始点位
ctx.moveTo(client.endX, client.endY)
// 监听 鼠标移动或手势移动
window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
}
// 绘制
const draw = event => {
// 获取当前坐标点位
const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
// 修改最后一次绘制的坐标点
client.endX = pageX
client.endY = pageY
// 根据坐标点位移动添加线条
ctx.lineTo(pageX , pageY )
// 绘制
ctx.stroke()
}
// 结束绘制
const cloaseDraw = () => {
// 结束绘制
ctx.closePath()
// 移除鼠标移动或手势移动监听器
window.removeEventListener("mousemove", draw)
}
// 创建鼠标/手势按下监听器
window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
// 创建鼠标/手势 弹起/离开 监听器
window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)
// 取消-清空画布
const cancel = () => {
// 清空当前画布上的所有绘制内容
ctx.clearRect(0, 0, config.width, config.height)
}
// 保存-将画布内容保存为图片
const save = () => {
// 将canvas上的内容转成blob流
canvas.toBlob(blob => {
// 获取当前时间并转成字符串，用来当做文件名
const date = Date.now().toString()
// 创建一个 a 标签
const a = document.createElement('a')
// 设置 a 标签的下载文件名
a.download = `${date}.png`
// 设置 a 标签的跳转路径为 文件流地址
a.href = URL.createObjectURL(blob)
// 手动触发 a 标签的点击事件
a.click()
// 移除 a 标签
a.remove()
})
}
</script>
</html>Mozilla 程序从 Gecko 1.8 (Firefox 1.5 (en-US)) 开始支持 <canvas>。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持<canvas> ，更旧版本的 IE 中，页面可以通过引入 Google 的 Explorer Canvas 项目中的脚本来获得<canvas>支持。Google Chrome 和 Opera 9+ 也支持 <canvas>。
在小程序中我们如果需呀实现的话，也是同样的原理哦，只是我们需要将创建实例和上下文的Api进行修改，因为小程序中是没有dom，既然没有dom，哪来的操作dom这个操作呢。
*请认真填写需求信息，我们会在24小时内与您取得联系。
