Html部分
引用了bootstrap作为按钮样式,引用了axios和qs作为实际开发中用于处理http。本文控制canvas显示使用的是vue的v-show,在页面加载时就已经渲染出了canvas元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7.css" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<style type="text/css">
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<div class="cot">
<input type="button" value="绘图" class="btn btn-primary" v-on:click="createNewImg()" />
</div>
<div >
<canvas width="750px" height="1334px" v-show='flag'></canvas>
</div>
</div>
</body>
</html>
因为vue的设计原理,若要使用v-if作为控制cavans是否渲染,则需要把下文的JavaScript部分尤其是图片加载等放在mounted钩子函数中处理,本文仅用v-show作为示例。
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
rentMoney:'300',
flag: false
},
methods: {
createNewImg() {
//显示并渲染画布
this.flag =! this.flag
var myCanvas = document.querySelector('canvas')
var ctx = myCanvas.getContext('2d')
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, 750, 1334);
//获取要显示的角标
var productP ="";
if(this.rentMoney){
productP = '¥' + this.rentMoney + ' /天';
}else{
productP = '会员免费';
}
console.log(productP)
//获取主图地址
var canvasTempImage = new Image()
canvasTempImage.src = "img/WechatIMG3.jpeg"
//获取二维码地址
var qrc = new Image()
qrc.src = "img/KuanDaiQRCode.png";
canvasTempImage.onload = () => {
// 画图
ctx.drawImage(canvasTempImage, 50, 50,650, 650)
// 画角标
ctx.moveTo(500, 0);
ctx.lineTo(600, 0 );
ctx.lineTo(750, 150);
ctx.lineTo(750, 250);
ctx.lineTo(500, 0);
ctx.fillStyle="#37c3c3";
ctx.fill();
//设置角标文字
ctx.beginPath();
ctx.font = "40px Microsoft YaHei";
ctx.fillStyle = "#ffffff";
ctx.textAlign = "center";
ctx.save();
ctx.translate(645, 120);
ctx.rotate(Math.PI/4);
ctx.fillText(productP, 0, 0);
ctx.restore();
//设置主标题
var name = '一款包';
ctx.font = "42px Microsoft YaHei";
ctx.fillStyle = "#000000";
ctx.textAlign = "center";
ctx.fillText(name, 370, 750);
ctx.stroke();
//设置副标题
ctx.font = "26px Microsoft YaHei";
ctx.fillStyle = "#666666";
ctx.textAlign = "center";
ctx.fillText("这里是副标题", 370, 800);
ctx.stroke();
//设置二维码
ctx.drawImage(qrc, 550, 1100, 150, 150);
}
}
}
});
</script>