iview+canvas写应用背景

小记：

实现如下效果：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);