canvas 自定义画布，在画布上增加（边框 图片 文字 ）

画布，在画布上增加（边框 图片 文字 ）"/>

canvas 自定义画布，在画布上增加（边框 图片 文字 ）

先说下我的功能需求：
通过画布，自定义一个区域大小，在这个区域内：添加背景图片、图中图叠加、画内外边框、设置文字（文字的字体和大小颜色）

效果图

背景图片就是鸣人和雏田，右下角的属于图中图叠加效果，左下和右下都是分别画的两个区域框

不需要用到上传图片功能的，这一步可以略过，直接看下面 canvasdiv() 方法
1.右下角的小图，我做的是上传图片，上面有个附图上传的按钮，这个用的是element-ui，代码我贴下面了，也可以不选择上传，自己从本地获取一张图片也可以

<el-form-item label="附图上传" prop="dh"><div><el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove":before-remove="beforeRemove" :on-change="uploadTU" :auto-upload="false" :limit="1"list-type="picture" :on-exceed="handleExceed" :file-list="fileList"><el-button size="small" type="primary">点击上传附图</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></div>
</el-form-item>

//附图上传调用的方法，这里主要是获取了图片的地址，
//这里这个 this.futuimage 会在做附图的时候用到，所以我这里要保存一下这个图片地址
uploadTU(file, filelist) {this.futuimage = file.url
},

画布上图、自定义文字、画线

1.先定义一个canvas容器

<div id="div"><canvas id="canvas"></canvas>
</div>

2.这个方法自己写个点击事件触发，我是用按钮触发的，按钮代码我就不写了

//图片生成pdn的方法canvasdiv(dataUrl) {var canvas = document.getElementById("canvas");canvas.width = 1545;canvas.height = 855;var ctx = canvas.getContext("2d");//这里就是背景图，我获取的是本地图片var image = new Image();//这里可以放png图片，也可以放图片的base64image.src = './img/beijingtu.png'; //图例图片var tuli = new Image();tuli.src = './img/xiao.png';//附图图片var futu = new Image();futu.src = this.futuimage;	//这个我放的是图片的base64，主要给大家说明一下可以放这种类型数据//从这一步开始，就开始画布了，在画布里设置图片呀 文字呀 边框呀image.onload = function () {var imgwidth = 1400;	//背景图宽度var imgheight = 750;	//背景图高度var left = (canvas.width - imgwidth) / 2;var top = (canvas.height - imgheight) / 2;//第一个参数image就是我读取的本地png图片，这里我试过放base64 也可以//第二个参数left 就是 x坐标，第三个参数top就是 y坐标 ，坐标轴懂吧 x和y//第四个和第五个参数就是背景图的宽和高，单位是像素px//多说一句第一个参数 image 看你自己需求放什么，但是我发现base64图片不能自适应ctx.drawImage(image, left, top, imgwidth, imgheight);	//背景图上图到画布//外框ctx.moveTo(left - 20, top - 20); //将画笔移动到坐标 x和yctx.lineTo(left + imgwidth + 20, top - 20); //从画笔位置绘制直线到坐标 x和yctx.lineTo(left + imgwidth + 20, top + imgheight + 20); //从当前位置绘制直线到ctx.lineTo(left - 20, top + imgheight + 20); //.从当前位置...ctx.closePath(); //闭合线条ctx.lineWidth = 3; //线宽ctx.strokeStyle = 'black'; //描边颜色ctx.stroke(); //渲染直线(描边)//最内的框ctx.moveTo(left, top); //将画笔移动到坐标ctx.lineTo(left + imgwidth, top); //从画笔位置绘制直线到坐标ctx.lineTo(left + imgwidth, top + imgheight); //从当前位置绘制直线到ctx.lineTo(left, top + imgheight); // 从当前位置ctx.closePath(); //闭合线条ctx.lineWidth = 1; //线宽ctx.strokeStyle = 'black'; //描边颜色ctx.stroke(); //渲染直线(描边)//看一下效果图左下角有个图例，背景色是白色，主要是填充区域颜色需要加这一行代码ctx.beginPath(); //开启路径绘制,不加它无法填充区域颜色，ctx.moveTo(left, imgheight / 4 * 3 + top); //将画笔移动到坐标ctx.lineTo(left + this.tuli_width, imgheight / 4 * 3 + top); //从画笔位置绘制直线到坐标ctx.lineTo(left + this.tuli_width, imgheight + top); //从当前位置绘制直线到ctx.lineTo(left, imgheight + top); //.从当前位置ctx.closePath(); //闭合线条ctx.fillStyle = 'white';ctx.fill(); //设置封闭图形填充ctx.lineWidth = 1; //线宽ctx.strokeStyle = 'black'; //描边颜色ctx.stroke(); //渲染直线(描边)//附图ctx.beginPath(); //开启路径绘制,不加它无法填充区域颜色ctx.moveTo(imgwidth - 300 + left, imgheight / 4 * 3 + top); //将画笔移动到坐标ctx.lineTo(left + imgwidth, imgheight / 4 * 3 + top); //从画笔位置绘制直线到坐标ctx.lineTo(left + imgwidth, imgheight + top); //从当前位置绘制直线到ctx.lineTo(imgwidth - 300 + left, imgheight + top); //.从当前位置ctx.lineWidth = 1; //线宽ctx.strokeStyle = 'black'; //描边颜色ctx.fillStyle = 'white';ctx.fill(); //设置封闭图形填充ctx.stroke(); //渲染直线(描边)ctx.closePath(); //闭合线条ctx.drawImage(futu, imgwidth - 300 + left, imgheight / 4 * 3 + top + 20, 300, imgheight / 4 - 20); //添加附图图片//附图俩字下面的横线ctx.moveTo(imgwidth - 300 + left, imgheight / 4 * 3 + top + 25); //将画笔移动到坐标ctx.lineTo(left + imgwidth, imgheight / 4 * 3 + top + 25);ctx.lineWidth = 1; //线宽ctx.strokeStyle = 'black'; //描边颜色ctx.stroke(); //渲染直线(描边)// 绘制文字(文本内容，x坐标，y坐标)ctx.font = "13px serif";    //文字大小ctx.fillStyle = "black";    //文字颜色ctx.textAlign = "center";   //文字居中ctx.font = "23px 宋简体"ctx.fillText("标题", canvas.width / 2, canvas.height - 835);ctx.font = "15px 黑体"ctx.fillText("图例", left + 75, imgheight / 4 * 3 + top + 17);ctx.fillText("小图区域", imgwidth - 150 + left, imgheight / 4 * 3 + top + 17);ctx.font = "13px 黑体"ctx.fillText("自定义文字", left - 10, canvas.height - 835);ctx.fillText("1:50000", canvas.width / 2, canvas.height - 12);ctx.fillText(that.getCurrentTime(), left + imgwidth - 20, canvas.height - 12);ctx.fillText("XXX", left - 10, canvas.height - 12);//展示生成后的图片效果--第二张图var base64 = canvas.toDataURL();document.getElementById("base64Img").src = base64;const download = document.getElementById("download");var ba64 = canvas.toDataURL("image/png");// 点击图片下载// canvas.onclick = function () {//     //download.click();//     var input1 = document.getElementById("upload");//     if (typeof FileReader === 'undefined') {//         alert("抱歉，你的浏览器不支持 FileReader");//         input1.setAttribute('disabled', 'disabled');//     } else {//         // console.log(typeof FileReader);//         input1.addEventListener('change', that.readFile(), false);//         /*input1.addEventListener('change',function (e){//       // console.log(e.target.files[0]);//       console.log(this.files[0]);//       },false); *///     }// };}},