以一个实际案例入门canvas

为了更直观的展示使用canvas开发，本文以绘制一个项目中常见的步骤图来展示效果，大致的构图如下


image.png

需求如下：

  1. 根据实际情况向后端请求数据并刷新页面，本文用setTimeout模拟为6s刷新一次
  2. 本步骤完成时，本步骤节点及之前的节点和线条全部点亮
  3. 在进行中状态的节点会有动画效果显示
  4. 点击节点时显示节点信息，配合其他相关操作
    模拟数据：
        // 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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 222,104评论 6赞 515
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,816评论 3赞 399
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 168,697评论 0赞 360
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,836评论 1赞 298
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,851评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,441评论 1赞 310
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,992评论 3赞 421
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,899评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,457评论 1赞 318
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,529评论 3赞 341
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,664评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 36,346评论 5赞 350
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 42,025评论 3赞 334
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,511评论 0赞 24
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,611评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 49,081评论 3赞 377
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,675评论 2赞 359