Vue应用原生Canvas拼合图像和文字

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>

Vue应用原生Canvas拼合图像和文字

Html部分

猜你喜欢