iview+canvas写应用背景

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Dead_Rabbit6_0/article/details/79594455

小记:

实现如下效果:iview+canvas 背景显示当前选择项目


因为项目工程目录原因,在项目的util目录下新建canvas.js文件,内容如下:

export const canvasInit = (text) => {
    var canvas = document.getElementById("deploy-canvas");
    if(canvas.getContext){
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, 2000, 2800);
        ctx.save();
        ctx.rotate(-20*Math.PI/180);
        ctx.font = "bold 30px Arial";
        ctx.fillStyle = "white";
        for(var i = 0; i < 200; i++){
            ctx.beginPath();
            ctx.fillText(text, i%20*220, i/20*200);
            ctx.closePath();
        }
        ctx.restore();
    }
}

在page.vue页面文件中引入:

import {canvasInit} from "@/util/canvas.js"

同时,在page.vue页面中加入:

<canvas id="deploy-canvas" height="1000" width="2000" class="deploy-canvas"></canvas>

然后在相应业务下应用:

canvasInit(value);

展开阅读全文

没有更多推荐了,返回首页