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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

HTML5代码

描述

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