1.先考虑做简单的,在其他博客复制好代码之后改造一下,效果如图:
2.代码如下:
<head>
<meta charset="UTF-8">
<title>画画板</title>
<style>
body{
background-color:#ccc;
}
.control-bar{
vertical-align:top;
display:inline-block;
}
button{
border:4px gray;
padding:10px 10px;
background:#15288fa1;
width:100px;
border-radius:10px;
box-shadow:10px 10px 10px #a7afd99c;
color:white;
}
button:hover {
background-color: #155aafa1; /* Green */
color: white;
}
#colorBtn{
width:60px;
height: 25px;
border:0px;
/*border:4px #cccccc;
background-color: #cccccc; */
}
</style>
</head>
<canvas id="myCanvas"></canvas>
<div class="control-bar">
<button id="clearBtn">清屏</button>
<button id="penBtn">画笔</button>
<input type="range" name="points" id="penSize" min="1" max="50" value = "2" style="display: none;" /><!--拖动条-->
<input type="color" id="colorBtn">
<button id="eraserBtn">橡皮擦</button>
<button onclick="pic_cancel()">撤销</button>
</div>
<div style="display: none;" id = "size">
</div>
<script>
(function(){
var w=800;//画画板的宽度
var h=600; //画画板的高度
//获取相关元素
var canvas=document.getElementById("myCanvas");
var penBtn=document.getElementById("penBtn");
var colorBtn=document.getElementById("colorBtn");
var eraserBtn=document.getElementById("eraserBtn");
var clearBtn=document.getElementById("clearBtn");
var penSize = document.getElementById("penSize");
var size = document.getElementById("size");
//画布大小设置
canvas.width=w;
canvas.height=h;
canvas.style.backgroundColor="#fff";
//获取绘图环境
var ctx=canvas.getContext("2d");
//鼠标按下事件
canvas.onmousedown=function(ev){
//求鼠标此时坐标
var x=ev.clientX-canvas.getBoundingClientRect().left;//getBoundingClientRect用于获取某个元素相对于视窗的位置集合
var y=ev.clientY-canvas.getBoundingClientRect().top;//32画笔/橡皮擦的宽度用于准确的定位
//开启路径 绘制起点
ctx.beginPath();
ctx.moveTo(x,y);
//鼠标移动
canvas.onmousemove=function(ev){
//求鼠标此时坐标
var x=ev.clientX-canvas.getBoundingClientRect().left;
var y=ev.clientY-canvas.getBoundingClientRect().top;
ctx.lineTo(x,y);
//绘制
ctx.stroke();
}
}
//鼠标抬起
canvas.onmouseup=function(){
this.onmousemove=function(){}
}
setPen();//默认画笔
//点击橡皮擦
eraserBtn.onclick=setEraser;
//点击画笔
penBtn.onclick=setPen;
//点击颜色选择
colorBtn.onchange=setPen;
//点击清屏
clearBtn.onclick=function(){
//ctx.clearRect(0,0,w,h)//和下面两种变法任选其一
canvas.width=canvas.width;
//重新设置画布的宽度,可以清除屏幕
setPen();
}
//设置为画笔的函数
function setPen(){
//size.style.display = "block";
ctx.lineWidth=penSize.value;
ctx.strokeStyle=colorBtn.value;
//document.body.style.cursor="url('./images/brush.ico'),auto";
}
//设置为橡皮擦的函数
function setEraser(){
//ctx.lineWidth=20;
ctx.strokeStyle="#fff";
document.body.style.cursor="url('./images/Eraser.ico'),auto";
}
document.onclick = function(e){
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循环判断至跟节点,防止点击的是div子元素
if (elem.id && elem.id=='size' ) {
return;
}else if(elem.id && elem.id=='penBtn'){
penSize.style.display = "inline-block";
penBtn.style.display = "none";
return;
}//如果还有别的div不想点击,就加else if判断
elem = elem.parentNode;
}
//这里写你想实现的效果
penSize.style.display = "none";
penBtn.style.display = "inline-block";
ctx.lineWidth=penSize.value;
};
document.onmousedown = canvas_copy();
})();
var imgData;
function canvas_copy(){
var context = document.getElementById("myCanvas").getContext('2d');
var width = context.canvas.width;
var height = context.canvas.height;
imgData = context.getImageData(0, 0, width, height);
}
function canvas_paste(){
var context = document.getElementById("myCanvas").getContext('2d');
context.putImageData(imgData,0,0);
}
function pic_cancel(){
canvas_paste();
}
</script>