PC 生成 canvas 图片
<canvas ref="test" id="myCanvas11" width="600" height="250" style="border:1px solid #ff0000;"> </canvas> <el-button @click="test">下载</el-button> // methods:
test() { let imgFormat = 'png'; let nowDate = new Date(); let timestamp = `${nowDate.getFullYear()}${nowDate.getMonth() + 1}${nowDate.getDate()}${nowDate.getHours()}${nowDate.getMinutes()}${nowDate.getSeconds()}`; let imgName = `${timestamp}.${imgFormat}`; let canvas = this.$refs.test; let quality = 1; let imgData = canvas.toDataURL(`image/${imgFormat}`, quality).replace(`image/${imgFormat}`, 'image/octet-stream'); let link = document.createElement('a'); link.href = imgData; link.download = imgName; link.click(); },
//mounted() 初始化 init() { let canvas = document.getElementById('myCanvas11'); let context = canvas.getContext('2d'); context.beginPath(); // 设置是个顶点的坐标,根据顶点制定路径 for (let i = 0; i < 5; i++) { context.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 50 + 200, -Math.sin((18 + i * 72) / 180 * Math.PI) * 50 + 200); context.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 20 + 200, -Math.sin((54 + i * 72) / 180 * Math.PI) * 20 + 200); } context.closePath(); // 设置边框样式以及填充颜色 context.lineWidth = '3'; context.fillStyle = 'pink'; context.strokeStyle = 'wheat'; context.fill(); context.stroke(); },