JS画板
2017-03-24 本文已影响107人
袁俊亮技术博客
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画图板</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
position: relative;
height: 100%;
overflow: hidden;
}
.ctrls {
position: absolute;
top: 0;
left: 0;
padding: 5px;
outline: solid 1px #ccc;
}
.ctrls > div {
margin-top: 10px;
}
.ctrls > div > label {
display: inline-block;
padding-right: 10px;
width: 90px;
text-align: right;
}
.ctrls button {
width: 100%;
}
</style>
</head>
<body>
<canvas id="can"></canvas>
<div class="ctrls">
<div>
<label for="val-color">Color: </label><input type="color" id="val-color" value="#00aced"/>
</div>
<!--<div><label for="val-r">R:</label><input type="text" maxlength="3" id="val-r"/></div>-->
<!--<div><label for="val-g">G:</label><input type="text" maxlength="3" id="val-g"/></div>-->
<!--<div><label for="val-b">B:</label><input type="text" maxlength="3" id="val-b"/></div>-->
<div>
<label for="val-linewidth">Line Width: </label><input type="text" id="val-linewidth" size="3" value="3"/>
</div>
<div>
<button id="btn-clear">Clear</button>
</div>
</div>
<script>
(function () {
var can = document.getElementById('can');
var oColor = document.getElementById('val-color');
var btnClear = document.getElementById('btn-clear');
var oLinewidth = document.getElementById('val-linewidth');
can.width = document.body.clientWidth || document.documentElement.clientWidth;
can.height = document.body.clientHeight || document.documentElement.clientHeight;
var oldPoint, newPoint;
oLinewidth.onkeyup = oLinewidth.onblur = function () {
limitNumber(this, 100);
};
btnClear.onclick = function () {
if (can.getContext) {
var ctx = can.getContext('2d');
ctx.save();
ctx.clearRect(0, 0, can.width, can.height);
ctx.restore();
}
};
/**
* 限制输入框的值
* @param oInput
* @param max
*/
function limitNumber(oInput, max) {
oInput.value = oInput.value.replace(/^0|[^(0-9)]/, '');
if (oInput.value > max) {
oInput.value = oInput.value.slice(0, -1);
}
}
/**
* 画点
* @param event
* @param color
* @param lineWidth
*/
function drawPoint(event, color, lineWidth) {
if (can.getContext) {
var ctx = can.getContext('2d');
var x = event.clientX;
var y = event.clientY;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.fillStyle = color;
ctx.lineWidth = lineWidth;
ctx.arc(x, y, lineWidth, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
/**
* 画线
* @param event
* @param color
* @param lineWidth
*/
function lineTo(event, color, lineWidth) {
if (can.getContext) {
var ctx = can.getContext('2d');
newPoint = {
x: event.clientX,
y: event.clientY
};
ctx.save();
ctx.beginPath();
ctx.moveTo(oldPoint.x, oldPoint.y);
ctx.lineTo(newPoint.x, newPoint.y);
ctx.lineCap = 'round'; // 圆
ctx.lineWidth = lineWidth;
ctx.strokeStyle = color;
ctx.stroke();
oldPoint = newPoint;
}
}
can.onmousedown = function (event) {
var ev = event || window.event;
oldPoint = {
x: ev.clientX,
y: ev.clientY
};
var color = oColor.value;
var lineWidth = (oLinewidth.value ? oLinewidth.value : 3);
// 画点
drawPoint(ev, color, lineWidth / 2);
document.onmousemove = function (event) {
var ev = event || window.event;
// 画线
lineTo(ev, color, lineWidth);
};
document.onmouseup = function () {
document.onmousemove = null;
};
};
})();
</script>
</body>
</html>
