canvas是一个画布,要在canvas上面绘制出时序图需要初始化一个画笔进行操作。
使用canvas绘制出时序图需要熟练使用以下技巧:
1.熟悉画布和画笔
2.熟悉绘制图片
3.熟悉绘制文字
4.熟悉绘制线条
5.绘制箭头
1.熟悉画布和画笔
初始化一个画布:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
初始化画笔:
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的矩形区域中
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])
在指定的位置绘制文本边框
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.绘制线条
context.beginPath();
context.moveTo (100,100); //设置起点状态
context.lineTo (700,700); //设置末端状态
context.lineWidth = 5; //设置线宽状态
context.strokeStyle = “#222” ; //设置线的颜色状态
context.stroke(); //进行绘制
context.closePath();
需要注意的是这里有一个语法,biginPath()、closePath()这两个方法标记绘制的开始和结束阶段,这样避免造成样式的混乱,颜色会覆盖等。
5.绘制箭头
常用的线段末端的箭头有两种,直线箭头或者不规则图形箭头,展现出来的坐标轴如下:
//绘制直线箭头
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();
//绘制多边形箭头
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.矢量图导出