制作一个画画板，有清屏有橡皮擦有画笔可以换颜色
style样式
<head>
<meta charset="UTF-8">
<title>画画板</title>
<style>
body{
background-color:#ccc;
}
.control-bar{
vertical-align:top;
display:inline-block;
}
</style>
</head>html结构
<canvas id="myCanvas"></canvas>
<div class="control-bar">
<button id="clearBtn">清屏</button>
<button id="penBtn">画笔</button>
<input type="color" id="colorBtn">
<button id="eraserBtn">橡皮擦</button>
</div>script
<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");
//画布大小设置
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;//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+32;
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(){
ctx.lineWidth=4;
ctx.strokeStyle=colorBtn.value;
document.body.style.cursor="url(‘./images/pen2.ico‘),auto";
}
//设置为橡皮擦的函数
function setEraser(){
ctx.lineWidth=20;
ctx.strokeStyle="#fff";
document.body.style.cursor="url(‘./images/eraser2.ico‘),auto";
}
})()
</script>时间： 2024-11-03 01:25:55