模型标签——Canvas技术介绍

郭隆邦老师threejs教程学习笔记

2D绘图技术Canvas。

1.郭隆邦老师博客介绍Canvas：Canvas教程_HTML5教程_郭隆邦技术博客

2.W3C介绍Canvas：HTML Canvas 参考手册

3.菜鸟介绍Canvas：学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程

Canvas与普通HTML和CSS比较

Canvas和普通HTML元素一样可以作为模型的标签使用，HTML和CSS的好处是实现一些常见的网页页面效果很方便，不过一些复杂的图像通过CSS也可以实现，但是相对来说没有Cnavas更为方便，Cnavas绘制一些图形效果更为灵活。

canvas作为模型标签

    // 绘制一个canvas画布 作为模型的标签显示模型信息
    const canvas = document.createElement("canvas");
    // 注意canvas画布绝对定位
    canvas.style.position = "absolute";
    canvas.width = 240;
    canvas.height = 60;
    const ctx = canvas.getContext('2d');
    // 矩形区域填充背景
    ctx.fillStyle = 'rgba(0,0,0,0.5)';
    ctx.fillRect(0, 0, 240, 60);
    ctx.beginPath();
    // 文字
    ctx.beginPath();
    ctx.translate(25, 30);
    ctx.font = "normal 24px 宋体"; //字体样式设置
    ctx.textBaseline = "middle"; //文本与fillText定义的纵坐标
    ctx.fillStyle = "#ffffff"; //文本填充颜色
    ctx.fillText("写字楼人数:", 0, 0);
    ctx.translate(140, 0);
    ctx.fillStyle = "#00ffff"; //文本填充颜色
    ctx.fillText("100人", 0, 0);
    document.body.appendChild(canvas)

效果图：

canvas画布标签数据更新

比如使用一个canvas画布表示一个楼层的信息，传入新的数据重新绘制canvas画布即可。

    // 绘制一个canvas画布 作为模型的标签显示模型信息
    const canvas = document.createElement("canvas");
    // 注意canvas画布绝对定位
    canvas.style.position = "absolute";
    canvas.width = 240;
    canvas.height = 60;
    //如果写字楼的人数变化了，比如后端通知前端，前端直接调用createCnavasTag()函数，输入新的人数重新绘制即可
    createCnavasTag(122);
    //封装一个canvas画布创建函数  number：人数
    function createCnavasTag(number) {
        // 每次调用的时候，清空当前画布
        //ctx.clearRect(0,0,800,600);
        canvas.width = 240;//重置画布尺寸，会清空
        const ctx = canvas.getContext('2d');
        // 矩形区域填充背景
        ctx.fillStyle = 'rgba(0,0,0,0.5)';
        ctx.fillRect(0, 0, 240, 60);
        ctx.beginPath();
        // 文字
        ctx.beginPath();
        ctx.translate(25, 30);
        ctx.font = "normal 24px 宋体"; //字体样式设置
        ctx.textBaseline = "middle"; //文本与fillText定义的纵坐标
        ctx.fillStyle = "#ffffff"; //文本填充颜色
        ctx.fillText("写字楼人数:", 0, 0);
        ctx.translate(140, 0);
        ctx.fillStyle = "#00ffff"; //文本填充颜色
        ctx.fillText(number+"人", 0, 0);
        document.body.appendChild(canvas)
    }

可以看到写字楼人数由100更新为122

效果实现

可以自己通过canvas代码直接实现一些UI效果，如果为了更快捷，也可以借助一些库或别人写好的UI组件，比如echarts库：EChartsJS | Home Page，比如百度“canvas 进度条”查看一些开源的canvas实现的UI组件效果。