<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>画板</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no, email=no">
<script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style>
#iCanvas {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
margin: auto;
border: 1px solid #ddd;
}
.btn-wrap {
position: absolute;
left: 0;
right: 0;
bottom: 10px;
display: flex;
}
input[type='button'] {
100px;
height: 50px;
margin: auto;
font-size: 26px;
}
</style>
</head>
<body>
<canvas id="iCanvas" width="500" height="500"></canvas>
<div class="btn-wrap">
<input type="button" id="clear" value="clear">
<input type="button" id="style1" value="1">
<input type="button" id="style2" value="2">
<input type="button" id="style3" value="3">
<input type="button" id="style4" value="4">
</div>
<script>
var canvas = document.getElementById('iCanvas');
var ctx = canvas.getContext('2d');
var width = canvas.width, height = canvas.height;
var isDraw = false, type = 4;
var points = {num: 0, prev: [], now: []};
var initialFrame = function () {
ctx.lineWidth = 1;
ctx.strokeStyle = "#ddd";
ctx.beginPath();
ctx.moveTo(width / 2, 0);
ctx.lineTo(width / 2, height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, height / 2);
ctx.lineTo(width, height / 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(width, height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, height);
ctx.lineTo(width, 0);
ctx.stroke();
};
initialFrame();
var paint = function (e) {
if (e.type === 'mousedown') {
isDraw = true;
savePoints(0, {x: e.offsetX, y: e.offsetY});
draw();
} else if (e.type === 'mouseup') {
isDraw = false;
ctx.strokeStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
} else if (e.type === 'mousemove' && isDraw) {
savePoints(1, {x: e.offsetX, y: e.offsetY});
draw();
}
};
var savePoints = function (state, point) {
var styleArr = [
{x: point.x, y: point.y},
{x: width - point.x, y: point.y},
{x: point.x, y: height - point.y},
{x: width - point.x, y: height - point.y},
{x: point.y, y: point.x},
{x: width - point.y, y: point.x},
{x: point.y, y: height - point.x},
{x: width - point.y, y: height - point.x}];
switch (type) {
case 0:
style(state, [styleArr[0]]);
break;
case 1:
style(state, [styleArr[0], styleArr[1]]);
break;
case 2:
style(state, [styleArr[0], styleArr[2]]);
break;
case 3:
style(state, [styleArr[0], styleArr[1], styleArr[2], styleArr[3]]);
break;
case 4:
style(state, styleArr);
break;
}
function style(state, arr) {
points.num = arr.length;
for (var i = 0; i < points.num; i++) {
if (state === 0) {
points.prev[i] = points.now[i] = arr[i];
} else {
points.prev[i] = points.now[i];
points.now[i] = arr[i];
}
}
}
};
var draw = function () {
ctx.lineWidth = 2;
for (var i = 0; i < points.num; i++) {
ctx.beginPath();
ctx.moveTo(points.prev[i].x, points.prev[i].y);
ctx.lineTo(points.now[i].x, points.now[i].y);
ctx.stroke();
}
};
var clear = function () {
ctx.clearRect(0, 0, width, height);
initialFrame();
ctx.lineWidth = 2;
ctx.strokeStyle = "#ddd";
};
var styleChange = function () {
type = +$(this).val();
};
var event = function () {
$('body').on('mouseup mousemove mousedown', '#iCanvas', paint)
.on('click', '#clear', clear)
.on('click', '[id*=style]', styleChange);
};
event();
</script>
</body>
</html>