1，html+js+canvas实现画板涂画功能
效果如下：
<!DOCTYPE HTML><html><head><meta charset="utf-8"/><style>#canvas{cursor:crosshair;}#red{background:red; width:30px;height: 27px}#blue{background:blue; width:30px;height: 27px}#yellow{background:yellow; width:30px;height: 27px}#white{background:white; width:30px;height: 27px}#zi{background:#8B026B; width:30px;height: 27px}</style></head><body><canvas id="canvas" width="600" height="400"> </canvas><br><label>画笔颜色：</label><input type="button" id="red" onclick="linecolor='red'"><input type="button" id="blue" onclick="linecolor='blue'"><input type="button" id="yellow" onclick="linecolor='yellow'"><input type="button" id="white" onclick="linecolor='white'"><input type="button" id="zi" onclick="linecolor='#8B026B'"> <label>画笔宽度：</label><select id="sel"><option value="4">4</option><option value="8">8</option><option value="16">16</option><option value="30">30</option></select><input type="button" value="生成图片" onclick="change()"><br><img id="image" src="" width="500px" height="200px"><script type="text/javascript">function change(){document.getElementById("image").src=canvas.toDataURL("image/jpg");//window.open("demo.htm", "height=100px, width=400px");//alert(document.getElementById("image"));}//下拉画笔宽度window.onload=function(){var huabi=document.getElementById("sel");huabi.onchange=function(){linw=huabi.value;};//linw=huabi;};var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//画一个黑色矩形ctx.fillStyle="#002200";ctx.fillRect(0,0,600,400);//按下标记var onoff=false;var oldx=-10;var oldy=-10;//设置颜色默认为白色var linecolor="white";//宽度默认为4var linw=4;//鼠标移动事件，事件绑定canvas.addEventListener("mousemove",draw,true);canvas.addEventListener("mousedown",down,false);canvas.addEventListener("mouseup",up,false);function down(event){onoff=true;oldx=event.pageX-10;oldy=event.pageY-10;}function up(){onoff=false;}function draw(event){if(onoff==true){var newx=event.pageX-10;var newy=event.pageY-10;ctx.beginPath();ctx.moveTo(oldx,oldy);ctx.lineTo(newx,newy);console.log(newx);ctx.strokeStyle=linecolor;ctx.lineWidth=linw;ctx.lineCap="round";ctx.stroke();oldx=newx;oldy=newy;}}</script></body></html>
以上文章是参考网络上的大神的 时间太久找不到链接了，如有侵权，联系必删，下面是我根据上面的改成了vue 加上了坐标
2，vue+canvas实现画板涂画功能
<template><div><canvas id="canvas" width="1280" height="720"> </canvas></div></template><script>export default {data() {return {onoff:false,oldx:0,oldy:0,ctx:'',linecolor:'',linw:8,qiuyu:0,onArr:[],endArr:[]}},mounted(){this.init()},methods: {init(){var canvas=document.getElementById("canvas");this.ctx=canvas.getContext("2d");//画一个黑色矩形this.ctx.fillStyle="transparent";this.ctx.fillRect(0,0,1280,720);//按下标记this.onoff=false;this.oldx=0;this.oldy=0;//设置颜色默认为红色this.linecolor="red";//宽度默认为8this.linw=8;//鼠标移动事件，事件绑定canvas.addEventListener("mousemove",this.draw,true);canvas.addEventListener("mousedown",this.down,false);canvas.addEventListener("mouseup",this.up,false);},down(event){if(this.hua==true){this.onoff=false}else{this.onoff=true;this.oldx=event.pageX-canvas.getBoundingClientRect().left;this.oldy=event.pageY-canvas.getBoundingClientRect().top;// console.log(this.oldx,this.oldy,'event')}},up(){this.onoff=false;this.qiuyu=0if(this.onArr.length>0){this.endArr.push(this.onArr)console.log(this.endArr,'this.endArr')//这里是鼠标抬起的时候记录的坐标值this.onArr=[]}},draw(event){if(this.onoff==true){if(this.qiuyu%6==0){//此处取余的目的是获取的坐标不是那么多var newx=event.pageX-canvas.getBoundingClientRect().left;//getBoundingClientRect方法是边框距离浏览器的距离var newy=event.pageY-canvas.getBoundingClientRect().top;// console.log(newx,newy,'000')this.ctx.beginPath();this.ctx.moveTo(this.oldx,this.oldy);this.ctx.lineTo(newx,newy);// console.log(newx);this.ctx.strokeStyle=this.linecolor;this.ctx.lineWidth=this.linw;this.ctx.lineCap="round";this.ctx.stroke();this.oldx=newx;this.oldy=newy;let xy={x:this.oldx,y:this.oldy}this.onArr.push(xy)}this.qiuyu++;}},}}</script>
