一个简单的小事例，利用canvas实现画板效果。
实现原理：
鼠标事件+canvas
效果图：
image.png
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: gainsboro;
}
#cav{
background: white;
position: relative;
}
#sel{
display: block;
width: 1190px;
height: 30px;
background: white;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 获得画板
var cav = document.getElementById("cav");
// 获得绘画环境
var cv = cav.getContext('2d');
// 设置画笔默认颜色及粗细
cv.lineWidth=10;
//鼠标按下事件
cav.onmousedown = function(e){
ev = window.event||e;
var s_l = ev.offsetX||ev.layerX;
var s_t = ev.offsetY||ev.layerY;
//开始绘制路径
cv.beginPath();
//画笔起始位置
cv.moveTo(s_l,s_t);
// 鼠标移动事件
cav.onmousemove = function(e){
var over_ev = window.event||e;
var over_l = over_ev.offsetX||over_ev.layerX;
var over_t = over_ev.offsetY||over_ev.layerY;
//结束位置
cv.lineTo(over_l,over_t);
//绘制线条
cv.stroke();
}
}
//鼠标抬起事件
cav.onmouseup = function(){
//取消鼠标移动事件
cav.onmousemove = null;
}
//颜色改变事件
document.getElementById("ys").onchange = function(){
cv.strokeStyle = this.value;
}
//改变粗细
document.getElementById("cx").onchange = function(){
var cx = this.value;
cv.lineWidth = cx;
document.getElementById("cx_txt").innerHTML = cx;
}
//橡皮擦
document.getElementById("xpc").onclick = function(){
alert('开启橡皮擦')
cv.strokeStyle = 'white';
}
}
</script>
</head>
<body>
<div id="sel">
画笔颜色：<input type="color" name="" id="ys" value="" />
画笔粗细：<input type="range" min="1" max="50" value="10" id="cx" />
<span id="cx_txt">10</span>
<input type="button" id="xpc" value="橡皮擦" />
</div>
<canvas id="cav" width="1200px" height="800px"></canvas>
</body>
</html>
如有问题欢迎交流。
如转载请注明出处，谢谢！
网友评论