时序图实现原理

canvas是一个画布，要在canvas上面绘制出时序图需要初始化一个画笔进行操作。

使用canvas绘制出时序图需要熟练使用以下技巧：

      1.熟悉画布和画笔

      2.熟悉绘制图片

      3.熟悉绘制文字

      4.熟悉绘制线条

      5.绘制箭头

1.熟悉画布和画笔

    初始化一个画布：

[code]<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

初始化画笔：

[code]var canvas= document.getElementById("myCanvas")
var ctx= context.getContext("2d")

2.绘制图片

drawImage(mixed image, int x, int y)以canvas上指定的坐标点开始，按照图像的原始尺寸大小绘制整个图像。这里的image可以是Image对象，也可以是Canvas对象(下同)。

drawImage(mixed image, int x, int y, int width, int height)以canvas上指定的坐标点开始，以指定的大小(width和height)绘制整个图像，图像将根据指定的尺寸自动进行相应的缩放。

drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)将指定图像的局部图像(以(imageX, imageY)为左上角、宽度为imageWidth、高度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上角坐标、宽度为canvasWidth、高度为canvasHeight的矩形区域中

[code]1 <script type="text/javascript">
2 //获取Canvas对象(画布)
3 var canvas = document.getElementById("myCanvas");
4 //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
5 if(canvas.getContext){
6     //获取对应的CanvasRenderingContext2D对象(画笔)
7     var ctx = canvas.getContext("2d");
8
9     //创建新的图片对象
10     var img = new Image();
11     //指定图片的URL
12     img.src = "http://www.365mini.com/image/google_logo.png";
13     //浏览器加载图片完毕后再绘制图片
14     img.onload = function(){
15         /*
16          * 将图像左侧的"Goo"部分(即以坐标(0,0)为左上角坐标、宽度为332px、高度为190px的部分图像)
17          * 绘制到canvas中以坐标(10,10)为左上角、宽度为332px、高度为190px的矩形区域
18          *
19          * canvas绘制图像的目标区域的宽度和高度与截取的部分图像尺寸保持一致，
20          * 就表示不进行缩放，以原始尺寸截取部分图像
21          */
22         ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190);
23     };
24 }
25 </script>

3.绘制文字

canvas 提供了两种方法绘制文本：

fillText(text,x,y [,maxWidth])

在指定位置的（x,y）位置填充指定的文本，绘制的最大宽度是可选的。

strokeText(text,x,y, [,maxWidth])

在指定的位置绘制文本边框

[code]let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');

ctx.font = "20px Times New Roman"
ctx.fillText("Sample String", 5, 30);
}

4.绘制线条

[code]context.beginPath();

context.moveTo (100,100); //设置起点状态
context.lineTo (700,700); //设置末端状态
context.lineWidth = 5; //设置线宽状态
context.strokeStyle = “#222” ; //设置线的颜色状态
context.stroke(); //进行绘制

context.closePath();

需要注意的是这里有一个语法，biginPath()、closePath()这两个方法标记绘制的开始和结束阶段，这样避免造成样式的混乱，颜色会覆盖等。

5.绘制箭头

常用的线段末端的箭头有两种，直线箭头或者不规则图形箭头，展现出来的坐标轴如下：

[code]//绘制直线箭头

context.beginPath();

context.moveTo (5,-5); //设置起点状态A(5,-5)
context.lineTo (0,0); //绘制线段AB

context.lineTo(5,5);//绘制线段BC
context.lineWidth = 5; //设置线宽状态
context.strokeStyle = “#222” ; //设置线的颜色状态
context.stroke(); //进行绘制

context.closePath();

[code]//绘制多边形箭头

context.beginPath();

context.moveTo (6,-6); //设置起点状态A(5,-5)
context.lineTo (0,0); //绘制线段AB

context.lineTo(6,6);//绘制线段BC

context.lineTo(3,0);//绘制线段CD
context.strokeStyle = “#222” ; //设置填充颜色
context.fill(); //进行多边形填充颜色

context.closePath();//闭合多边形

参考以上几种canvas绘制的基本语法，就可以着手实现时序图的绘制：

第一步：绘制所有的人员基本信息

           1.1 绘制人员图片。这里可以看到所有人员的图标大小一致，而且X轴坐标相同，上下间距相同，所以这里可以通过丈量原型图效果，直接循环人员信息数组，进行绘制人员图片信息。

           1.2 绘制人员姓名。这里可以看到人员姓名文本区域具有以下特点：位于人员图片下方、字符串过长会换行显示、宽度固定，不会一直向右拓展、没有文字信息的人员生命线不绘制等。

第二步：绘制所有人员的生命线

           2.1 绘制人员生命线。经过观察发现生命线左侧起点的X轴坐标都相同，上下间距也相同，右侧线段终点是canvas的宽度，这里绘制原理和上面人员基本信息相同。

           2.2 绘制生命线起点的圆。利用canvas API中绘制圆形的方法，填充绘制圆形坐标和大小。

第三步：绘制交易信息

           3.1 绘制交易信息线段。交易信息有交易支付方和接收方，对应的就是交易信息线段的起点和终点，通过观察发现起点和终点的Y轴在对象的生命线上，X轴之间间距是固定的，这里通过循环即可绘制出来。

           3.2 绘制交易时间。交易时间绘制在线段的起点。

           3.3 绘制交易金额。交易金额绘制在线段的终点。

           3.4 绘制箭头。箭头绘制在线段的终点。

           3.5 设置交易信息的颜色。起点的Y轴坐标大于终点的Y轴坐标，则颜色显示为蓝色，起点的Y轴坐标小于终点的Y轴坐标，则颜色显示为橙色。

第四步：导出canvas画布

思考问题：

1.集中当天的交易交易线的间距应该更密集点？

2.画布不支持缩放

3.画布不支持拖拽

4.矢量图导出