用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實現類似結構圖的效果