<template><div><!-- <div class="container"><input type="radio" name="tool" id="huabi" checked><label for="huabi">画笔</label></div> --><canvas style="z-index:9999" width="800" height="600"></canvas><p @click="clear" >重画</p><p @click="toImg">转化</p></div>
</template>
<script>
// import draw from './draw.js'
export default {data() {return {canvas:{}}},mounted() {this.do()},methods: {do() {var tool = "huabi";// debuggerthis.canvas = document.querySelector("canvas");var x, y;// var canvas = document.querySelector("canvas");var ctx = this.canvas.getContext("2d");ctx.fillStyle = 'red'const _this = thisthis.canvas.onmousedown = function(event) {x = event.clientX - this.offsetLeft;y = event.clientY - this.offsetTop;document.onmousemove = function(event) {var x1 = event.clientX - _this.canvas.offsetLeft;var y1 = event.clientY - _this.canvas.offsetTop;// this.huabi(x, y, x1, y1, ctx);ctx.beginPath();ctx.globalAlpha = 1;ctx.lineWidth = 2;ctx.strokeStyle = "#000";ctx.moveTo(x, y);ctx.lineTo(x1, y1);ctx.closePath();ctx.stroke();x = x1;y = y1;};};document.onmouseup = function() {this.onmousemove = null;};},clear(){document.querySelector("canvas").getContext("2d").clearRect(0,0,800,600)},toImg(){var image = new Image();image.src = this.canvas.toDataURL("image/png");return image;}// huabi(startX, startY, endX, endY, ctx) {//   ctx.beginPath();//   ctx.globalAlpha = 1;//   ctx.lineWidth = 2;//   ctx.strokeStyle = "#000";//   ctx.moveTo(startX, startY);//   ctx.lineTo(endX, endY);//   ctx.closePath();//   ctx.stroke();// }}
};
</script>
复制代码