版权声明：请不要将我的内容平移到你的博客变成你的名字，尊重知识 https://blog.csdn.net/wangzhneg123/article/details/88017628
效果展示：
源码展示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 画板-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
div {
width:400px;
height:650px;
border:1px solid black;
box-shadow:4px 4px 4px grey;
}
canvas {
border-bottom:2px solid red;
}
#btn {
margin-left:30px;
}
span {
margin-left:30px;
}
</style>
</head>
<body>
<div>
<canvas id="cont" width="400" height="600"></canvas>
<input type="button" name="" id="btn" value="清空画板">
<span>线条宽度</span>
<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<span>颜色</span>
<input type="color" id="col">
</div>
<script>
var myCanvas = document.getElementById("cont");
var txt = myCanvas.getContext("2d");
var btn = document.getElementById("btn");
var sel = document.getElementById("sel");
myCanvas.onmousedown = function(event) {
var eve = window.event || event;
x = eve.clientX;
y = eve.clientY;
txt.beginPath();
txt.moveTo(x, y);
txt.lineWidth = sel.value;
myCanvas.onmousemove = function(event) {
var eve = window.event || event;
mx = eve.clientX;
my = eve.clientY;
txt.lineTo(mx, my);
txt.strokeStyle = $(col).val();
txt.stroke();
}
}
myCanvas.onmouseup = function(event) {
var eve = window.event || event;
myCanvas.onmousemove = null;
}
btn.onclick = function() {
txt.clearRect(0, 0, 400, 600);
}
</script>
</body>
</html>