为了更直观的展示使用canvas开发，本文以绘制一个项目中常见的步骤图来展示效果，大致的构图如下
image.png
需求如下：
- 根据实际情况向后端请求数据并刷新页面，本文用setTimeout模拟为6s刷新一次
- 本步骤完成时，本步骤节点及之前的节点和线条全部点亮
- 在进行中状态的节点会有动画效果显示
- 点击节点时显示节点信息，配合其他相关操作
模拟数据：
// status表示节点当前状态，-1表示未完成，0表示进行中，1表示已完成
let data1 = [
{ nodeId: "001x", nodeName: "第一步", status: "0" },
{ nodeId: "002x", nodeName: "第二步", status: "-1" },
{ nodeId: "003x", nodeName: "第三步", status: "-1" }
]
let data2 = [
{ nodeId: "001x", nodeName: "第一步", status: "1" },
{ nodeId: "002x", nodeName: "第二步", status: "0" },
{ nodeId: "003x", nodeName: "第三步", status: "-1" }
]
let data3 = [
{ nodeId: "001x", nodeName: "第一步", status: "1" },
{ nodeId: "002x", nodeName: "第二步", status: "1" },
{ nodeId: "003x", nodeName: "第三步", status: "0" }
]
let data4 = [
{ nodeId: "001x", nodeName: "第一步", status: "1" },
{ nodeId: "002x", nodeName: "第二步", status: "1" },
{ nodeId: "003x", nodeName: "第三步", status: "1" }
]
页面拆解：
由上面的图片及需求，我们可以分析出，我们在绘制时需要绘制五个部分，分别是圆，矩形，线段，交互以及动画
使用canvas开发
第一步：
在页面上加上canvas标签并添加上Id
<canvas id="myCanvas"></canvas>
第二步
获取DOM及上下文，（canvas的宽高可随意调整，本例的操作是将父节点的宽高赋给canvas）
let canvasParent = document.getElementById('canvas-demo')
var c = document.getElementById("myCanvas");
// 使canvas的宽高等于父节点的宽高
c.width = canvasParent.clientWidth
c.height = canvasParent.clientHeight
// 获取上下文
let ctx = c.getContext("2d")
获取上下文之后，我们就可以在canvas上面正式操作了
第三步
开始绘制圆，矩形，线段以及文本填充
//绘制圆形
function renderCircle(x, y, fillColor, lable) {
ctx.fillStyle = fillColor || "#FFA500";
ctx.strokeStyle = fillColor || "#FFA500";
ctx.beginPath();
ctx.arc(x, y, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
ctx.stroke();
fillText(lable.text, lable.x, lable.y)
}
// 绘制矩形
function renderRect(x, y, fillColor, lable) {
let width = 200, height = 100;
ctx.fillStyle = fillColor || "#fff";
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.fillRect(x, y, width, height)
ctx.stroke();
fillText(lable.text, lable.x, lable.y, lable.fillColor)
}
// 绘制连线
function renderLine(from, to, fillColor) {
ctx.strokeStyle = '#000'//控制线段的颜色
ctx.lineWidth = 1
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();
}
// 文本填充
function fillText(text, x, y, fillColor) {
ctx.font = "16px Arial";
ctx.textAlign = "center"
ctx.fillStyle = fillColor || "white"
ctx.fillText(text, x, y);
}
这些画好之后开始连接起来
function renderCanvasDemo(data) {
if (data.length > 0) {
renderCircle(100, 150, "#FFA500", { text: "开始", x: 100, y: 150 })
let len = data.length
let pre = { x: 150, y: 100 }//保存开始节点的最右侧点的坐标
for (let i = 0; i < len; i++) {
let x = pre.x, y = 150;
renderLine({ x, y }, { x: x + 100, y: y }, "gray")
let f_color = data[i].status > 0 ? "green" : "#FFA500"//当该步骤完成时，节点填充颜色变为绿色
renderRect(x + 100, y - 50, f_color, { text: data[i].nodeName, x: x + 200, y, fillColor: '#000' })
pre.x += 300;
}
let x = pre.x
renderLine({ x, y: 150 }, { x: x + 100, y: 150 }, "gray")
renderCircle(x + 150, 150, "#FFA500", { text: "结束", x: x + 150, y: 150 })
} else {
console.error("错误处理或者给用户提示")
}
}
现在静态的步骤图算是完工了
image.png
第四步 添加交互
这个步骤就稍微有点难度了，因为我们只能在canvas上面绑定事件，并不能在里面的元素上面绑定，而且canvas的上下文是过程式执行的，执行后就会将节点信息销毁，这样的话我们就只能拿到最后一个节点信息，所以，即使我们能够获取点击时的坐标，但是并不知道这个坐标在哪个元素里面。
这个时候，我们可以换个角度，在绘制的时候保存所有的节点信息，这样的话，当点击canvas获取到坐标之后，将canvas重新绘制，然后再去判断这个坐标点是否在元素的绘制范围内，这样我们就成功的解决了事件绑定了，具体代码如下：
let drawCanvasArr = []//---------存储绘制的节点
function renderCanvasDemo(data) {
if (data.length > 0) {
renderCircle(100, 150, "#FFA500", { text: "开始", x: 100, y: 150 })
drawCanvasArr.push({ cb: renderCircle, args: [100, 150, "#FFA500", { text: "开始", x: 100, y: 150 }] })
let len = data.length
let pre = { x: 150, y: 100 }//保存开始节点的最右侧点的坐标
for (let i = 0; i < len; i++) {
let x = pre.x, y = 150;
renderLine({ x, y }, { x: x + 100, y: y }, "gray")
let f_color = data[i].status > 0 ? "green" : "#FFA500"
renderRect(x + 100, y - 50, f_color, { text: data[i].nodeName, x: x + 200, y, fillColor: '#000' })
pre.x += 300;
drawCanvasArr.push(
{ cb: renderLine, args: [{ x, y }, { x: x + 100, y }, "gray"] },
{
cb: renderRect, args: [x + 100, 100, f_color, { text: data[i].nodeName, x: x + 200, y, fillColor: '#000' }],
nodeInfo: { id: data[i].nodeId, x: x + 100, y: 100 }
}
)
}
let x = pre.x
renderLine({ x, y: 150 }, { x: x + 100, y: 150 }, "gray")
renderCircle(x + 150, 150, "#FFA500", { text: "结束", x: x + 150, y: 150 })
drawCanvasArr.push(
{ cb: renderLine, args: [{ x, y: 150 }, { x: x + 100, y: 150 }, "gray"] },
{ cb: renderCircle, args: [x + 150, 150, "#FFA500", { text: "结束", x: x + 150, y: 150 }] }
)
} else {
console.error("错误处理或者给用户提示")
}
}
c.addEventListener("click", function (e) {
clearCanvas(ctx, c)
drawCanvasArr.forEach(item => {
item.cb.apply(undefined, item.args)
if (item.nodeInfo) {
let x, y;
({ x, y } = item.nodeInfo)
// 矩形的宽高分别为200，100,当点击的坐标点x大于矩形的起点x并且小于矩形的终点x+200,y同理，那么即可判定
// 点击后的坐标点在矩形节点上
if ((e.layerX > x && e.layerX < x + 200) && (e.layerY > y && e.layerY < y + 100)) {
console.log(item.nodeInfo.id)
}
}
})
});
// 清空区域内所有的元素
function clearCanvas(ctx, el) {
ctx.clearRect(0, 0, el.width, el.height);
}
这个时候我们再去点击canvas的时候就可以得到想要的信息了
image.png
第五步 添加动画
这一步才算是真正的看到canvas动画的尾灯了，不知道大家留意过没有，一般有canvas动画场景的，一般canvas元素不止一个，比如画图方面比较出名的process on
image.png
这是因为在展示的时候，canvas是分主次的，主canvas相当于舞台的作用，而那些次canvas才是真正在上面演出的（请原谅我找不到更好的词语来形容了，暂时就这样）
所以我们也是同样的操作，在原有的canvas后面新增一个，并且将其浮动到原有的上面
<div style="position: relative;height: 300px;">
<canvas id="myCanvas"></canvas>
<canvas id="myCanvas1" style="position: absolute; top: 0; left: 0; z-index: 2;"></canvas>
</div>
虽然是新增了一个标签，但是操作是一样的,接下来我们就在第二个canvas上面实现第三个需求
首先我们要做一个矩形从左到右移动的简易动画，具体思路为借助setInterval来定时刷新坐标点，然后定时清空，然后重绘这一过程，来实现动画的效果，具体代码如下
// 第二层canvas，用于制作动画以及放点击事件
let c_ani = document.getElementById("myCanvas1");
c_ani.height = canvasParent.clientHeight
c_ani.width = canvasParent.clientWidth
let context = c_ani.getContext("2d");
function canvasAnimationMask(x, y, fillColor) {
let width = 50, height = 100;
context.fillStyle = fillColor
context.beginPath();
context.fillRect(x, y, width, height)
context.stroke();
}
function canvasAnimation(x, y, fillColor, condition) {
let end = x + 200, start = x;
return function () {
if (condition) {
timer = setInterval(() => {
clearCanvas(context, c_ani)
canvasAnimationMask(start, y, fillColor)
if (start == end - 50) {
start = end - 200
} else {
start += 50
}
// console.log(start)
}, 500);
}
}
}
动画已经完成了，这个时候我们需要将这个动画挪到我们预期的节点上，也就是说，我们需要获取到需要动画的节点的信息,
在执行renderCanvasDemo渲染时进行判断，如果该节点的状态是进行中，那么将其坐标传入canvasAnimation函数中，这样的话，第三个需求就算是完成了
代码如下
let timer = null
let AnimationFrame
function renderCanvasDemo(data) {
if (data.length > 0) {
renderCircle(100, 150, "#FFA500", { text: "开始", x: 100, y: 150 })
drawCanvasArr.push({ cb: renderCircle, args: [100, 150, "#FFA500", { text: "开始", x: 100, y: 150 }] })
let len = data.length
let pre = { x: 150, y: 100 }//保存开始节点的最右侧点的坐标
if (timer) {
cancelAnimationFrame(AnimationFrame)
clearInterval(timer)
clearCanvas(context, c_ani)
}
for (let i = 0; i < len; i++) {
let x = pre.x, y = 150;
renderLine({ x, y }, { x: x + 100, y: y }, "gray")
let f_color = data[i].status > 0 ? "green" : "#FFA500"
renderRect(x + 100, y - 50, f_color, { text: data[i].nodeName, x: x + 200, y, fillColor: '#000' })
if (data[i].status == "0") {
AnimationFrame = requestAnimationFrame(canvasAnimation(x + 100, y - 50, "rgba(255,0,0,0.2)", true))
}
pre.x += 300;
drawCanvasArr.push(
{ cb: renderLine, args: [{ x, y }, { x: x + 100, y }, "gray"] },
{
cb: renderRect, args: [x + 100, 100, f_color, { text: data[i].nodeName, x: x + 200, y, fillColor: '#000' }],
nodeInfo: { id: data[i].nodeId, x: x + 100, y: 100 }
}
)
}
let x = pre.x
renderLine({ x, y: 150 }, { x: x + 100, y: 150 }, "gray")
renderCircle(x + 150, 150, "#FFA500", { text: "结束", x: x + 150, y: 150 })
drawCanvasArr.push(
{ cb: renderLine, args: [{ x, y: 150 }, { x: x + 100, y: 150 }, "gray"] },
{ cb: renderCircle, args: [x + 150, 150, "#FFA500", { text: "结束", x: x + 150, y: 150 }] }
)
} else {
console.error("错误处理或者给用户提示")
}
}
效果图如下
image.png
但是，这个时候我们发现，交互消失了， 不过问题不大，因为我们刚刚通过浮动把我们作为背景板的canvas给遮住了，我们只需要将监听的DOM节点切换为最外层的DOM即可
完整代码见github
