用HTML5 Canvas勾画简单流程图示例

2024-09-05 12:18:58

字体：大中小

来源：转载

供稿：网友

本效果是在HTML5环境下实现的，主要用到的是Canvas标签，演示如何用Canvas画流程图，虽然流程图上只有几个加点和带箭头的线条，但演示了实现原理，由此可扩展出更复杂的流程图，是比较基础的Canvas画图实例。

<!doctype html><html><head><mata charset="utf-8"><title>HTML5 Canvas勾画流程图</title><style type="text/css">body{background-color:#bbb;}#canvas{background-color:#fff;}</style></head><body><canvas id="canvas" width="800" height="600"><p> :(真的很抱歉~  <br> 您是不是用的悲催的IE8？您的浏览器不支持HTML5 canvas，试试更换成Chrome,FireFox,IE9...</p></canvas><input id="point" type="text" /><script>//定义节点颜色。蓝、绿色、红var colors = new Array("rgba(0, 0, 255, 0.5)", "rgba(0, 255, 0, 0.5)", "rgba(255, 0, 0 , 0.5)");//定义节点function Point() {  this.x = 0;  this.y = 0;  this.radii = 0;  this.color = "";}//初始化节点数据function getPoints() {  var point = new Array();  point[0] = new Point();  point[0].x = 200;  point[0].y = 20;  point[0].radii = 10;  point[0].color = colors[0];  point[1] = new Point();  point[1].x = 200;  point[1].y = 120;  point[1].radii = 10;  point[1].color = colors[1];  point[2] = new Point();  point[2].x = 317;  point[2].y = 120;  point[2].radii = 10;  point[2].color = colors[1];  point[3] = new Point();  point[3].x = 99;  point[3].y = 279;  point[3].radii = 10;  point[3].color = colors[2];  point[4] = new Point();  point[4].x = 408;  point[4].y = 279;  point[4].radii = 10;  point[4].color = colors[2];  point[5] = new Point();  point[5].x = 408;  point[5].y = 535;  point[5].radii = 10;  point[5].color = colors[2];  return point;}//定义常用方法类function Utils() {};Utils.captureMouse = function(element) {  var mouse = {    x: 0,    y: 0  };  element.addEventListener('click',  function(event) {    var x, y;    if (event.pageX || event.pageY) {      x = event.pageX;      y = event.pageY;    } else {      x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;      y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;    }    x -= element.offsetLeft;    y -= element.offsetTop;    mouse.x = x;    mouse.y = y;    document.getElementById("point").value = "x=" + mouse.x + ";y=" + mouse.y;  },  false);  return mouse;};//定义箭头线条function Arrow() {  this.start_x = 0;  this.start_y = 0;  this.end_x = 0;  this.end_y = 0;  this.length = 0; //两点之间的长度  this.radii = 0; //圆点的半径  this.arrow_len = 10; //箭头的长度  this.color = "#ffff00";  this.rotation = 0;}Arrow.prototype.draw = function(context) {  context.save();  context.translate(this.start_x, this.start_y);  context.rotate(this.rotation);  context.lineWidth = 2;  context.fillStyle = this.color;  context.beginPath();  context.moveTo(0, 0);  context.lineTo(0, -2);  context.lineTo( - (this.length - this.radii - this.arrow_len), -2);  context.lineTo( - (this.length - this.radii - this.arrow_len), -4);  context.lineTo( - (this.length - this.radii), 0);  context.lineTo( - (this.length - this.radii - this.arrow_len), 4);  context.lineTo( - (this.length - this.radii - this.arrow_len), 2);  context.lineTo(0, 2);  context.closePath();  context.stroke();  context.restore();};window.onload = function() {  var canvas = document.getElementById("canvas");  var context = canvas.getContext('2d');  var mouse = Utils.captureMouse(canvas)  //绘制节点和线条  var point = getPoints();  for (var i = 0; i < point.length - 1; i++) {    //绘制节点    context.fillStyle = point[i].color;    context.beginPath();    context.arc(point[i].x, point[i].y, point[i].radii, 0, Math.PI * 2, true);    context.closePath();    context.fill();    //绘制线条    var arrow = new Arrow();    arrow.start_x = point[i].x;    arrow.start_y = point[i].y;    arrow.end_x = point[i + 1].x;    arrow.end_y = point[i + 1].y;    arrow.radii = point[i + 1].radii;    var dy = arrow.start_y - arrow.end_y;    var dx = arrow.start_x - arrow.end_x;    arrow.rotation = Math.atan2(dy, dx);    if (dy == 0) arrow.length = Math.abs(dx);    else if (dx == 0) arrow.length = Math.abs(dy);    else arrow.length = Math.sqrt(dx * dx + dy * dy);    arrow.draw(context);    //如果是最后一个节点了，则绘制出来    if (i == point.length - 2) {      context.fillStyle = point[i + 1].color;      context.beginPath();      context.arc(point[i + 1].x, point[i + 1].y, point[i + 1].radii, 0, Math.PI * 2, true);      context.closePath();      context.fill();    }  }}</script></body></html>

上一篇：CSS3 超酷Loading效果

下一篇：CSS3实现类似结构图的效果