共计 3696 个字符,预计需要花费 10 分钟才能阅读完成。
提醒:本文最后更新于2020-09-15 14:41,文中所关联的信息可能已发生改变,请知悉!
代码如下:
<!DOCTYPE html> | |
<html> | |
<meta http-equiv="content-type" Content="text/html;charset=utf-8"> | |
<head> | |
<title>简易画板</title> | |
<style> | |
#eraseImg{ /*橡皮样式*/ | |
border:solid; | |
color:gray; | |
border-radius: 50%; | |
width: 5px; | |
height: 5px; | |
position: absolute; | |
display: none; | |
} | |
.eraseSeries{ /*橡皮大小单选按钮组的排列,此div不单独占一行*/ | |
display: inline-block; | |
} | |
</style> | |
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
<script> | |
var c;//获取到的2d画板 | |
var painting = false;//判断是否正在绘画,即鼠标左键是否长按下去 | |
var canvas;//画板 | |
$(function(){ | |
$(".eraseSeries").hide();//初始状态单选按钮组隐藏 | |
canvas=document.getElementById("myCanvas"); | |
c=canvas.getContext("2d"); | |
c.lineCap="round";//设置笔迹边角,否则笔迹会出现断层 | |
c.strokeStyle="black";//笔迹的颜色 | |
c.lineWidth=5;//笔迹的粗细 | |
$("#color").change(function(){//笔迹颜色发生改变时 | |
if(eraseFlag==true)//处在擦皮状态 | |
{ | |
$("#erase").trigger("click");//自动触发橡皮的点击事件,以返回到画笔状态 | |
} | |
c.strokeStyle=$(this).val();//设置画笔状态 | |
c.lineWidth=$(this).val(); | |
}); | |
$("#fontSize").change(function(){//画笔粗细发生改变 | |
if(eraseFlag==true)//同上 | |
{ | |
$("#erase").trigger("click"); | |
} | |
c.lineWidth=$(this).val(); | |
c.strokeStyle=$("#color").val(); | |
//eraseFlag=false; | |
}); | |
$(".eraseSeries").click(function(){//橡皮大小发生改变 | |
var size=$('input[name="eraseSize"]:checked').val();//获取到橡皮单选按钮组的选中值 | |
sizeE=size;//将该值传到全局变量上,sizeE需要用来控制橡皮样式的位置 | |
c.lineWidth=size; | |
$("#eraseImg").css({"width" :size+"px","height":size+"px"});//橡皮样式大小发生改变 | |
}); | |
$("#erase").click(function(){//橡皮按钮的点击翻转事件 | |
if(eraseFlag == false){ | |
c.save();//保持上次设置的状态 | |
eraseFlag=true; | |
c.strokeStyle="white"; | |
$("#erase").text("画笔");//改变按钮上的文字 | |
$(".eraseSeries").show('fast');//橡皮单选组出现 | |
// $("#eraseImg").show(); | |
sizeE=5; | |
}else{ | |
eraseFlag=false; | |
$("#erase").text("橡皮"); | |
$(".eraseSeries").hide('fast'); | |
c.restore();//恢复上次画笔的状态(包括颜色,粗细等) | |
} | |
}); | |
}); | |
var p_x;//上次鼠标位置 | |
var p_y; | |
var p_x_now;//当前瞬间鼠标位置 | |
var p_y_now; | |
var eraseFlag=false; | |
var sizeE;//橡皮大小 | |
$(document).mousedown(function(e){//鼠标按下触发事件 | |
p_x= e.clientX;//获取位置,并置为上次鼠标位置 | |
p_y= e.clientY; | |
painting = true;//画笔启动标志 | |
}); | |
$(document).mousemove(function(e){//鼠标移动触发事件 | |
if(eraseFlag==true&& e.clientY>30)//橡皮处在激活状态,并且鼠标Y的位置大于30,也即鼠标在画板内 | |
{ | |
//橡皮图像跟随鼠标而动 | |
$("#eraseImg").animate({left: e.clientX-sizeE+"px",top: e.clientY-sizeE+"px"},0).show('fast'); | |
} | |
else | |
{ | |
$("#eraseImg").hide('fast'); | |
} | |
if(painting==true)//处于画笔激活状态 | |
{ | |
//alert(1); | |
p_x_now= e.clientX;//当前瞬间的鼠标位置 | |
p_y_now= e.clientY; | |
c.beginPath();//开始路径 | |
//曲线是由一段段非常小的直线构成,计算机运算速度很快,这是一种以直线迭代画曲线的方式 | |
c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移动到起始点 | |
c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//从起始点画直线到终点 | |
c.stroke(); | |
c.closePath();//封闭路径,这个很重要,如果路径不封闭, | |
// 那么只要canvas颜色发生改变,所有的之前画过的颜色都发生改变 | |
p_x = p_x_now;//一次迭代后讲当前的瞬间坐标值赋给上次鼠标坐标值 | |
p_y = p_y_now; | |
} | |
}); | |
$(document).mouseup(function(e){//鼠标松开触发事件 | |
painting=false;//冻结画笔 | |
}); | |
</script> | |
</head> | |
<body> | |
<div > | |
<select id="color" > <!--画笔颜色--> | |
<option class="opt" value="red">红色</option> | |
<option class="opt" value="yellow">黄色</option> | |
<option class="opt" value="blue">蓝色</option> | |
<option class="opt" value="black" selected>黑色</option> | |
<option class="opt" value="green">绿色</option> | |
</select> | |
<select id="fontSize"> <!--画笔大小--> | |
<option value=5 selected>5</option> | |
<option value=10>10</option> | |
<option value=15>15</option> | |
<option value=20>20</option> | |
<option value=30>30</option> | |
<option value=30>50</option> | |
</select> | |
<button id="erase">擦皮</button> <!--橡皮按钮--> | |
<div class="eraseSeries"> <!--橡皮大小--> | |
<input type="radio" name="eraseSize" value="5" checked/>5 | |
<input type="radio" name="eraseSize" value="10"/>10 | |
<input type="radio" name="eraseSize" value="15"/> 15 | |
<input type="radio" name="eraseSize" value="20"/> 20 | |
<input type="radio" name="eraseSize" value="30"/>30 | |
<input type="radio" name="eraseSize" value="30"/>50 | |
<input type="radio" name="eraseSize" value="30"/>100 | |
</div> | |
</div> | |
<!--<button id="btn">btn</button>--> | |
<canvas id="myCanvas" width="1420" height="780" style="border: solid"></canvas> <!--整个画布--> | |
<div id="eraseImg"></div> <!--橡皮形状--> | |
</body> | |
</html> |
来源:http://blog.csdn.net/jiangjianANT/article/details/24461987
正文完