单机版你画我猜--摘自前端网-白红宇

单机版你画我猜--摘自前端网

阅读量：5147 次

发布时间：2019-06-13

本文共 2650 字，大约阅读时间需要 8 分钟。

<!DOCTYPE html>

<html>

<head>

<style>

#box{

width: 600px;

height: 500px;

margin: 100px auto;

background-color: orange;

border: 3px solid #cccccc;

}

#box nav{

width: 100%;

height: 100px;

}

#box nav div{

height: 50px;

line-height: 50px;

}

#box nav .changeColor{

padding-left: 15px;

}

.changeColor input{

width: 30px;

height: 30px;

margin: 0 15px;

vertical-align: middle;

}

.clear input:first-of-type{

margin-left: 15px;

width: 100px;

height: 30px;

background-color: #ffffff;

}

.clear input:last-of-type{

margin-left: 15px;

width: 30px;

height: 30px;

background-color: #ffffff;

}

canvas{

background-color: #fff;

}

</style>

</head>

<body>

<nav>

</div>

橡皮擦 <input type="button" class="eraser">

</div>

</nav>

</div>

var cvs =document.querySelector('canvas');

var ctx =cvs.getContext('2d');

var eraser = document.querySelector(".eraser");

console.log(eraser);

cvs.addEventListener('mousedown',function (e) {//addEventListener() 方法用于向指定元素添加事件句柄。

var x = e.clientX-this.offsetLeft;

var y = e.clientY-this.offsetTop;

cvs.oldPoint = {

x:x-1,

y:y-1,

}

drawLine(x.y)

this.addEventListener('mousemove',move);

this.addEventListener('mouseup',up);

});

function move(e) {

var x = e.clientX - this.offsetLeft;

var y = e.clientY - this.offsetTop;

drawLine(x,y);

cvs.oldPoint = {

x: x,

y: y,

}

function up(e) {

this.removeEventListener("mousemove",move);

this.removeEventListener("mouseup",up);

}

function drawLine(x,y) {

ctx.beginPath();

ctx.lineWidth = 5;

ctx.lineJoin = "round";

ctx.lineCap = "round";

ctx.moveTo(cvs.oldPoint.x,cvs.oldPoint.y);

ctx.lineTo(x,y);

ctx.stroke();

ctx.closePath();

}

function clearLayer() {

ctx.clearRect(0,0,cvs.width,cvs.height);

}

var colorBtn = document.querySelectorAll(".changeColor input");

var colorBtnArr = [].slice.call(colorBtn);

// var colorBtnArr = Array.prototype.slice.call(colorBtn);

colorBtnArr.forEach(function (item,index) {

item.onclick = function () {

changeColor(this);

}

})

function changeColor(btn) {

ctx.strokeStyle = getComputedStyle(btn).backgroundColor;

}

eraser.onclick = function () {

ctx.strokeStyle = getComputedStyle(cvs).backgroundColor;

};

</script>

</body>

</html>

转载于:https://www.cnblogs.com/Webyangbowen/p/6597966.html

你可能感兴趣的文章

MVC MODEL Attribute 操纵速记

查看>>

wcf服务端代码方式及客户端代码方式

查看>>

电商测试环境Jenkins multibranch pipeline实践

【动态规划】Codeforces 706C Hard problem

查看>>

1.4.1 Arithmetic Progressions