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";
//宽度默认为4
var 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";
//宽度默认为8
this.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=0
if(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>