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