整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
程序员不是专门写代码的吗，只要把代码写得足够优雅就行了呀，为什么还要画图？画好图呢？
没错！一图胜千言，对复杂问题进行分析分解，再通过图形化的表达方式，来描述业务或者技术上的逻辑，可以说事半功倍！今天作者就带大家认识一些常见的图、图的画法以及常用的画图工具。
英文名称是The Mind Map，也叫做心智导图，脑图，心智地图，脑力激荡图，灵感触发图，概念地图，树状图，树枝图或思维地图。它是表达发散性思维的有效图形思维工具，它简单却又很有效，是一种实用性的思维工具。可用于会议记录、思路整理、测试用例、商业计划等。
以特定的图形符号加上说明，表示算法的图，称为流程图或框图。流程图是一个系统的信息流、观点流或部件流的图形代表，也是软件设计开发过程中比较常用的图形。流程图的图形符号如下图所示：
时序图（Sequence Diagram），又名序列图、循序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作，也是软件设计开发过程中比较常用的图形。时序图中包括的建模元素主要有：角色、对象、生命线、控制焦点、消息等等。
E-R图也称实体-联系图(Entity Relationship Diagram)，提供了表示实体类型、属性和联系的方法，用来描述现实世界的概念模型，它是描述现实世界关系概念模型的有效方法。
参考文档 https://blog.51cto.com/u_15067238/2573674
①业务架构：使用一套方法论/逻辑对产品（项目）所涉及到的业务进行边界划分，所以熟悉业务是关键，如下图所示某业务中台架构图：
②应用架构：它是对整个系统实现的总体上的架构，需要指出系统的层次、系统开发的原则、系统各个层次的应用服务。如下图所示，就将系统分为数据层、服务层、通讯层、展现层，并细分写明每个层次的应用服务。
③技术架构：技术架构是应接应用架构的技术需求，并根据识别的技术需求，进行技术选型，把各个关键技术和技术之间的关系描述清楚。技术架构解决的问题包括：纯技术层面的分层、开发框架的选择、开发语言的选择、涉及非功能性需求的技术选择等。
④部署图(deployment diagram，配置图)是用来显示系统中软件和硬件的物理架构。部署图中可以了解到软件和硬件之间的物理关系以及处理节点的组件分布情况。使用部署图可以显示运行时系统的结构，同时还传达构成应用程序的硬件和软件元素的配置和部署方式。
⑤网络拓扑图：是指用传输媒体互连各种设备的物理布局，就是用什么方式把网络中的计算机等设备连接起来。拓扑图给出网络服务器、工作站的网络配置和相互间的连接，它的结构主要有星型结构、环型结构、总线结构、分布式结构、树型结构、网状结构、蜂窝状结构等。
不是在于熟悉和熟练使用几种图形元素，而更在于，真正理解“模型”的意思和意义，通过合理的过程定义和图形使用，对复杂问题进行分析、解构后的结构化、逻辑化、专业化的表达和描述，反映出业务逻辑的处理过程和实现上的逻辑划分，是对复杂问题合理简化的结果。
①Xmind：一款非常实用的商业思维导图软件，应用全球最先进的Eclipse RCP 软件架构，全力打造易用、高效的可视化思维软件，强调软件的可扩展、跨平台、稳定性和性能，致力于使用先进的软件技术帮助用户真正意义上提高生产率。https://www.xmind.cn/
②Process On：是一个在线协作绘图平台，为用户提供强大、易用的作图工具。优点是在线支持协作，模板比较丰富，缺点是必须登录才可以使用。免费版仅支持 9 个文件。https://www.processon.com/
③Draw.io：一款免费的跨平台绘图工具。可以创建流程图、组织架构图、UML、ER图、泳道图、网络拓朴图、思维导图等等。内置丰富的模板和控件库供挑选使用，还可以导入组件。支持Google Dirve，One Drive， Dropbox和本地存储，支持将流程图导出为多种格式，比如 pdf/svg/html 等，提供 Chrome 插件。https://app.diagrams.net/
④Microsoft Visio：它提供各行业和角色的丰富用例、强大的合作伙伴工具和服务并与 Microsoft 365 和 Microsoft Teams 无缝集成，了解它如何帮助你拓展业务。为客户提供轻松创建专业图表并快速做出决策所需的工具。
⑤OmniGraffle：Mac os系统上一款功能强大的绘图软件，可提供绘制图表，如：树状结构表，流程表，页面编排等等，您还可以用OmniGraffle来规划电影或者戏剧剧本的情节走向，绘制公司的组织图，并显示一个专案所需要的步骤。
大家还有什么好的画图软件，欢迎评论区里留言推荐！
锋网按：本文为雷锋字幕组编译的技术博客，原标题 Matplotlib Plotting Guide， 作者为 Prince Grover。
翻译 | 李振 于志鹏 整理 | 凡江
大多数人不会花大量时间去学 matplotlib 库，仍然可以实现绘图需求，因为已经有人在 stackoverflow、github 等开源平台上提供了绝大多数画图问题的解决方案。我们通常会使用 google 来完成绘图需求。至少我是这样。
那学 matplotlib 库有什么用？答案是：可以节约搜索时间。掌握 matplotlib 的速查表并了解其基本接口，根据个性需求从众多资源中编辑我们的绘图，从长期来看会节约很多的时间。
大部分内容取自以下 2 个链接，建议也去阅读一下。
https://realpython.com/python-matplotlib-guide/#why-can-matplotlib-be-confusing
https://s3.amazonaws.com/assets.datacamp.com/blog_assets/Python_Matplotlib_Cheat_Sheet.pdf
matplotlib 是一个基于 Python 的 2D 绘图库，其可以在跨平台的在各种硬拷贝格式和交互式环境中绘制出高图形。
一个有趣的现象。为什么引用库总采用 import matplotlib.pyplot as plt 的方式呢？
因为使用例如 pylab import * 或者 %pylab 是一个非常不好的方式，matplotlib 官方不建议这样使用，具体原因如下：
由于历史原因，from pylab import * 仍然存在，但是强烈建议不要这样使用。这样做会遮蔽 Python 的内置函数进而占用命名空间，导致难以追踪的 bugs。想要实现零输入获得 IPython 集成，推荐使用 ％matplotlib 命令。来源：https://matplotlib.org/users/shell.html#using-matplotlib-in-a-python-shell
使用 matplotlib 绘制不同类型的图像是很容易的，有很多文档和教程。最重要的是，了解最佳的绘图方式。如何使用 axes，subplots 等。这篇文章主要针对这些问题。
1.内联绘图和 ％ matplotlib
％matplotlib 命令可以在当前的 Notebook 中启用绘图。这个命令提供一个可选参数，指定使用哪个 matplotlib 后端。绝大多数情况下，Notebook 中都是使用 inline 后台，它可以在 Notebook 中嵌入绘图。另一个选项是 qt 后台，它在侧窗口打中打开 Matplotlib 交互 UI 。
Matlibplot 提供了多种绘图 UI ，可进行如下分类 ：
弹出窗口和交互界面： ％matplotlib qt 和 ％matplot tk
非交互式内联绘图： ％matplotlib inline
交互式内联绘图： ％matplotlib notebook－－＞别用这个，它会让开关变得困难。
2.理解 matplotlib 对象结构
pyplot 是一个 matplotlib 面向对象的函数接口。
plt.gca
它返回当前 plot 关联的轴
如果不使用 plt.close，则会显示出空的图形。因为在开始时使用了 inline 命令。
axis＿id 仍然是相同的，但是当我们移动到另一个 Notebook 块时，plt.gca 会发生变化。
Setter 和 Getter
Getter 和 Setter 方法用于捕获当前或任意 axies 以及对其进行修改。我们可能需要修改标题、颜色、图列、字体等。有两种方法：
1. 使用 fig.axes[i] 指定要抓取的 axes，使用 setter 的 getter 对 axies 对象进行调用。在上面的例子中，只有一个 axes，所以我们调用 axes[0]。
2. 我们可以直接使用 plt.bla 调用当前 axis（其中，bla 可以是 title()，legend()，xlabel()等）。这是 matlibplot 面向对象的一种函数。这个函数让修改当前的 axes 变得容易。比 1 的方法更常用。
当我们使用 axes[i] 时，我们可以调用任何之前的代码块中的任何 axes 对象，但是调用 plt.bla，会在每个代码块中创建新的 axes 对象，并只调用当前对象。因此，上面例子中，只在 plt.title 被调用时，才创建新 plt 对象。
重要观察：我们通常在当前 axis 对象上调用 plt.bla，这种语法使得每个代码块中的 axis 对象都是新创建的。但是通过调用 fig.axes[0]，我们也可以从任何代码块中处理之前的 axes 对象。
这是 stateless(object oriented) 方法，并可以自定义，当图像变得复杂时，这样做很方便。
所以，我建议是使用 fig，ax ＝ plt.subplots(＿) 先解压 axes 和 figure，并给它们分配给一个新的变量。然后，可以对这些变量使用 Getter 和 Setter 方法进行绘图中的更改。此外，这使得我们能够在多个 axes 上做工作，而不是只在一个当前 axes 上。pyplot 使用 1 次创建子图，然后使用 OO 方法。
结论：从现在开始，我使用 plt.subpots 来完成不同的绘图。（如果有人认为这个观点是错误的，请纠正我）
3.matplotlib 图像剖析
来自： https://matplotlib.org/faq/usage_faq.html
4.绘图的基本例子
如何作图的基本例子，涵盖面向对象绘图的各个方面。请仔细阅读。
总结上面的例子：
我们创建 1 行和 2 列的图形。即，1 行和 2 列中的 2 个 axes 对象。
我们分别自定义 ax1 和 ax2。可以看到，我们可以将 Y－ticks 移动到右边的第二图形中。
5.二维网格的绘制
subplot2grid
需要做什么？
观察下面的绘图格式。
思路是把上面的图形考虑成为 2x4 网格。然后将多个网格分配给单个图以容纳所需的图形。
重点：
我们可以使用 subplot2grid 定制我们的绘图布局。
我们可以用 plt.figure 创建无 axes 对象的图形，然后手动添加 axes 对象。
我们可以使用 fig.suptitle 来设置整个图形的总标题。
6.颜色，颜色条，RGB 数组和颜色图谱
我们已经介绍了 ax.plot，ax.scatter，ax.bar 和 ax.hist 等基本图形操作，另一个更常用的函数是 ax.imshow，它用来显示彩色图或图像／RGB 数组。
7.线条样式和线条宽度
改变线条宽度、颜色或风格。
8.基本的数据分布
EDA 过程中的必要操作。
9.二维数组的等高线图和颜色网格图
热像图（颜色网格图）和等高线图在很多情况下都有助于可视化 2D 数据。
10.图像的调整、修改边缘坐标和标度
最后调整细节，让绘图变得更好看。
11.标度的限制和自动调整
需要注意的事情：
填充（padding）自动设置 X 轴或 Y 轴网格标度
我们可以使用 xlim，ylim 设置 x，y 的刻度限制
12.技巧
13.轴线
14.结束
博客原址： https://www.kaggle.com/grroverpr/matplotlib-plotting-guide/notebook
雷锋网雷锋网
家好，我是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小时内与您取得联系。
