修改画笔颜色；修改画笔粗细；橡皮；重置画板；撤消上一步；另存为图片；
画布id='myCanvas'宽度='400'高度='400'/canvas
类板{
构造函数（id）{
this.canvas=document.getElementById(id);
this.context=this.canvas.getContext('2d');
this.isDrawing=false;
this.posX=0;
this.posY=0;
this.init();
}
在里面（） {
const bindDown=this.handleMouseDown.bind(this);
const bindMove=this.handleMouseMove.bind(this);
this.canvas.addEventListener('mousedown', bindDown);
this.canvas.addEventListener('mousemove', bindMove);
window.addEventListener('mouseup', ()={
this.isDrawing=false;
});
}
处理鼠标按下（e）{
const rect=this.canvas.getBoundingClientRect();
this.posX=e.clientX - rect.left;
this.posY=e.clientY - rect.top;
this.isDrawing=true;
}
处理鼠标移动（e）{
if (this.isDrawing===true) {
const rect=this.canvas.getBoundingClientRect();
this.drawLine(this.context, this.posX, this.posY,
e.clientX - 矩形左，e.clientY - 矩形顶部）；
this.posX=e.clientX - rect.left;
this.posY=e.clientY - rect.top;
}
}
绘制线（上下文，x1，y1，x2，y2）{
上下文.beginPath();
context.strikeStyle='黑色';
上下文.lineWidth=1;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
上下文.中风();
context.closePath();
}
}
新板（'myCanvas'）；
输入id='colorPicker' type='color' /
document.getElementById('colorPicker').addEventListener('change', e={
b.changeColor(e.target.value);
})
类板{
构造函数（id，颜色='#000'）{
this.penColor=颜色；
}
绘制线（上下文，x1，y1，x2，y2）{
context. StrokeStyle=this.penColor;
}
改变颜色（颜色）{
this.penColor=颜色；
}
}
ctx.lineWidth=数字；
context.globalCompositeOperation='目的地输出';请参阅暂存功能。
context.clearRect(0,0,宽度，高度);
this.canvas.toDataURL()将当前画布保存为base64图像并将其存储在数组中。设置另一个索引，撤消/恢复修改的索引值，并从数组中检索相应的图片。
创建a标签，href为toDataURL()生成的图片，模拟点击事件，点击a链接。
div class='歌剧'
输入id='colorPicker' type='color' /
选择id='fontsizeSelect'
选项值='1'1/选项
选项值='2'2/选项
选项值='3'3/选项
选项值='4'4/选项
选项值='5'5/选项
/选择
按钮id='橡皮擦' 橡皮擦/按钮
按钮id='重置'重置/按钮
按钮id='撤销'撤销/按钮
按钮id='恢复'恢复/按钮
按钮id='saveAsPic' 另存为图片/按钮
/div
画布id='myCanvas' 宽度='400' 高度='400'/canvasclass 板{
构造函数（id，颜色='#000'，字体大小=1）{
this.canvas=document.getElementById(id);
this.context=this.canvas.getContext('2d');
this.isDrawing=false;
this.posX=0;
this.posY=0;
this.penColor=颜色；
this.fontsize=字体大小；
this.isErasing=false;
这一步=0;
this.historyList=[];
this.init();
}
在里面（） {
const bindDown=this.handleMouseDown.bind(this);
const bindMove=this.handleMouseMove.bind(this);
this.canvas.addEventListener('mousedown', bindDown);
this.canvas.addEventListener('mousemove', bindMove);
window.addEventListener('mouseup', ()={
this.isDrawing=false;
});
this.canvas.addEventListener('mouseup', ()={
这一步++；
if (this.step this.histroyList.length) {
this.histroyList.length=this.step;
}
this.historyList.push(this.canvas.toDataURL());
});
this.historyList.push(this.canvas.toDataURL());
}
处理鼠标按下（e）{
const rect=this.canvas.getBoundingClientRect();
this.posX=e.clientX - rect.left;
this.posY=e.clientY - rect.top;
this.isDrawing=true;
}
处理鼠标移动（e）{
const rect=this.canvas.getBoundingClientRect();
if (this.isErasing) {
this.context.globalCompositeOperation='目的地输出';
this.context.beginPath();
this.context.arc(e.clientX - 矩形.left, e.clientY - 矩形.top,
10, 0, Math.PI * 2);
this.context.fill();
} else if (this.isDrawing===true) {
this.drawLine(this.context, this.posX, this.posY,
e.clientX - 矩形左，e.clientY - 矩形顶部）；
this.posX=e.clientX - rect.left;
this.posY=e.clientY - rect.top;
}
}
绘制线（上下文，x1，y1，x2，y2）{
上下文.beginPath();
context. StrokeStyle=this.penColor;
context.lineWidth=this.fontsize;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
上下文.中风();
context.closePath();
}
改变颜色（颜色）{
this.penColor=颜色；
}
更改字体大小（大小）{
this.fontsize=大小；
}
switchEraseStatus() {
this.isErasing=!this.isErasing;
}
清除板（）{
this.context.clearRect(0, 0, window.myCanvas.width,
window.myCanvas.height);
这一步=0;
this.historyList=[];
}
撤销（） {
if (this.step 0) {
这一步--;
this.context.clearRect(0, 0, window.myCanvas.width,
window.myCanvas.height);
让pic=new Image();
pic.src=this.histroyList[this.step];
pic.addEventListener('加载', ()={
this.context.drawImage(pic, 0, 0);
})
} 别的{
console.log('无法继续取消')
}
}
恢复（） {
if (this.step this.histroyList.length - 1) {
这一步++；
this.context.clearRect(0, 0, window.myCanvas.width,
window.myCanvas.height);
让pic=new Image();
pic.src=this.histroyList[this.step];
pic.addEventListener('加载', ()={
this.context.drawImage(pic, 0, 0);
})
} 别的{
console.log('无法继续恢复')
}
}
保存为图片() {
const el=document.createElement('a');
el.href=this.canvas.toDataURL();
el.download='画布';
const event=new MouseEvent('点击');
el.dispatchEvent(事件);
}
}
const b=new Board('myCanvas');
window.colorPicker.addEventListener('更改', e={
b.changeColor(e.target.value);
})
window.fontsizeSelect.addEventListener('更改', e={
b.changeFontSize(window.fontsizeSelect.value);
})
window.eraser.addEventListener('点击', ()={
b.switchEraseStatus();
})
window.reset.addEventListener('点击', ()={
b.clearBoard();
})
window.revoke.addEventListener('点击', ()={
b.撤销();
})
window.recover.addEventListener('点击', ()={
b.恢复（）；
})
window.saveAsPic.addEventListener('点击', ()={
b.saveAsPic();
})
