<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 600px;
height: 500px;
margin: 100px auto;
border: 1px solid black;
}
#box .control{
height: 100px;
}
#box .control div{
height: 50px;
line-height: 50px;
}
#box .control .changeolor{
padding-left: 15px;
}
#box .control .changeolor input{
width: 30px;
height: 30px;
margin: 0 15px;
vertical-align: middle;
}
#box .control .changeolor input:first-of-type{
background-color: black;
}
#box .control .changeolor input:nth-of-type(2){
background-color: pink;
}
#box .control .changeolor input:nth-of-type(3){
background-color: red;
}
#box .control .changeolor input:nth-of-type(4){
background-color: orange;
}
#box .control .changeolor input:nth-of-type(5){
background-color: brown;
}
#box .control .changeolor input:nth-of-type(6){
background-color: purple;
}
#box .control .clear input{
width: 190px;
height: 40px;
font-size: 20px;
margin-left: 3px;
}
canvas{
background-color: whitesmoke;
}
b{
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<div class="control">
<div class="changeolor">
选择画笔颜色：
<input type="button" name="" id="" value="" />
<input type="button" name="" id="" value="" />
<input type="button" name="" id="" value="" />
<input type="button" name="" id="" value="" />
<input type="button" name="" id="" value="" />
<input type="button" name="" id="" value="" />
</div>
<div class="clear">
<input type="button" name="" id="" value="清空画布" />
当前选中的颜色是：<b>黑色</b>
<input type="button" name="" id="" value="橡皮擦" />
</div>
</div>
<canvas id="canvas" width="600" height="400"></canvas>
</div>
<script type="text/javascript">
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
//初始化当前画笔状态
canvas.isDraw = true;
//按下事件
canvas.addEventListener("mousedown",function (e) {
// console.log(e.pageX,e.pageY);
// var x = e.pageX - this.offsetLeft;
// var y = e.pageY - this.offsetTop;
// console.log(e.offsetX,e.offsetY);
var x = e.offsetX;
var y = e.offsetY;
//记录就得点
this.oldPoint = {
x : x - 0.1,
y : y - 0.1,
}
if (this.isDraw) {
//画笔功能
draw(x,y);
}else{
//橡皮擦功能
clearPart(x,y);
}
//移动和抬起
this.addEventListener("mousemove",move);
this.addEventListener("mouseup",up);
},false)
//鼠标按下事件
function up () {
this.removeEventListener("mousemove",move)
}
//鼠标移动事件
function move (e) {
var x = e.offsetX;
var y = e.offsetY;
if (this.isDraw) {
//画笔功能
draw(x,y);
}else{
//橡皮擦功能
clearPart(x,y);
}
this.oldPoint = {
x : x,
y : y,
}
}
/*画的方法*/
function draw (x,y) {
ctx.beginPath();
//笔宽度
ctx.lineWidth = 5;
ctx.moveTo(x,y);
ctx.lineCap = "round"
ctx.lineTo(canvas.oldPoint.x,canvas.oldPoint.y)
ctx.stroke();
ctx.closePath();
}
//获取改变颜色按钮
var btns = document.querySelectorAll(".changeolor input");
console.log(btns);
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = changeColor;
}
//颜色匹配 数据结构
var colorObj = {
"#000000":"黑色",
"#ffc0cb":"粉色",
"#ff0000":"红色",
"#ffa500":"橘色",
"#a52a2a":"棕色",
"#800080":"紫色",
};
//改变颜色
function changeColor () {
ctx.strokeStyle = getComputedStyle(this,null).backgroundColor;
var b = document.querySelector("b");
b.style.color = ctx.strokeStyle;
console.log(ctx.strokeStyle);
b.innerHTML = colorObj[ctx.strokeStyle];
//改变画笔状态
canvas.isDraw = true;
}
//清空画布
var clearAllBtn = document.querySelector(".clear input");
clearAllBtn.onclick = function () {
ctx.clearRect(0,0,canvas.width,canvas.height);
}
var clearBtn = document.querySelector(".clear input:last-of-type");
clearBtn.onclick = function () {
//改变状态为橡皮擦状态
canvas.isDraw = false;
}
function clearPart (x,y) {
//保存场景
ctx.save();
ctx.beginPath();
ctx.arc(x,y,10,0,Math.PI*2,false);
ctx.clip();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.closePath();
//还原场景
ctx.restore();
}
</script>
</body>
</html>