<!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>