<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>使用canvas制作画板</title>
<link rel="stylesheet" href="">
<style>
body {
background: #efe;
padding-top: 50px;
}
#paint {
border: 2px solid hsl(107, 98%, 56%);
background: #fff;
float: left;
}
#paint:hover {
cursor: crosshair;
}
#Container {
width: 800px;
height: 100%;
margin: 0 auto;
}
#Container .box {
float: left;
margin: 10px;
}
#Container .box button {
color: #606060;
border: 1px solid #b7b7b7;
background: #ededed;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
width: 102px;
font-size: 1em;
height: 31px;
margin-right: 20px;
margin-left:20px;
}
#Container .box h3 {
margin-top: 2px;
display: inline-block;
}
#Container #image_png {
float: left;
width: 800px;
height: 400px;
border: 2px solid hsl(107, 98%, 56%);
background: #fff;
display: none;
}
#colorbox {
width: 365px;
height: 52px;
}
#colorbox>li {
width: 50px;
height: 50px;
border: 1px solid rgba(0, 0, 0, 0.06);
list-style: none;
float: left;
}
#linewidth li {
display: inline;
font-size: 20px;
}
</style>
</head>
<body>
<div id="Container">
<ul id="colorbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<canvas id="paint" width="800" height="400"></canvas>
<div class="box">
<button type="button" onclick="copyimage()">点击保存</button>
<h3>滑动改变画笔粗细：</h3>
<input type="range" min="5" max="50" value="50" id="trackBar">
<h4 id="hh" style="display:inline">5</h4>
<button onclick="clearAll(this)" id="clearAll_s">清除画布</button>
</div>
<img src="" id="image_png">
</div>
<script src="js/jquery-2.0.0.min.js"></script>
<script>
var mycanvas = document.getElementById("paint");
var ctx = mycanvas.getContext("2d");
ctx.strokeStyle = "red";
var flag = false;
$("#paint").mousedown(function(e) { //当鼠标按下时
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
ctx.moveTo(mouseX, mouseY);
flag = true;
});
$("#paint").mousemove(function(e) { //当鼠标抬起时
if (flag == true) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
});
$("#paint").mouseup(function(e) { //当鼠标移动时
flag = false;
});
//实现颜色版
var colors = ['#000000', '#ff0000', '#0000ff', '#FF7F24', '#00ffff', '#FFFF00', '#4EEE94'];
var font = [20, 40, 60, 80, 100];
var colorboxs = document.getElementById("colorbox").getElementsByTagName("li");
for (var i = 0; i < colors.length; i++) {
colorboxs[i].style.backgroundColor = colors[i];
}
//为画笔添加颜色
$("li").each(function() {
$(this).bind("click", function() {
ctx.beginPath();
ctx.strokeStyle = this.style.backgroundColor;
});
});
//画笔加粗
var trackBar = document.getElementById("trackBar");
trackBar.value = 5;
trackBar.addEventListener("change", function() {
hh.innerHTML = this.value;
ctx.beginPath();
ctx.lineWidth = this.value;
});
//将图画保存
function copyimage(event) {
var img_png_src = mycanvas.toDataURL("image/png");
document.getElementById("image_png").src = img_png_src;
$("#image_png").css("display", "block")
}
//清除画布
function clearAll() {
ctx.clearRect(0, 0, 880, 400);
ctx.beginPath();
}
</script>
</body>
</html>
最后效果：
