html5+javascript制作简易画板附图


Posted in Javascript onApril 25, 2014

见图:

html5+javascript制作简易画板附图 

代码如下:

<!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: 118px; 
width: 5px; 
height: 5px; 
position: absolute; 
display: none; 
} 
.eraseSeries{ /*橡皮大小单选按钮组的排列,此div不单独占一行*/ 
display: inline-block; 
} 
</style> 
<script src="jquery-1.7.1.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").toggle(function(){//橡皮按钮的点击翻转事件 
c.save();//保持上次设置的状态 
eraseFlag=true; 
c.strokeStyle="white"; 
$("#erase").text("画笔");//改变按钮上的文字 
$(".eraseSeries").show('fast');//橡皮单选组出现 
// $("#eraseImg").show(); 
sizeE=5; 

},function(){ 
eraseFlag=false; 
$("#erase").text("橡皮"); 
$(".eraseSeries").hide('fast'); 
c.restore();//恢复上次画笔的状态(包括颜色,粗细等) 
}); 

//setInterval(paint,2); 
}); 
var p_x;//上次鼠标位置 
var p_y; 
var p_x_now;//当前瞬间鼠标位置 
var p_y_now; 
var eraseFlag=false; 
var sizeE;//橡皮大小 
$(document).mousedown(function(e){//鼠标按下触发事件 

// alert(sizeE); 
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> 
</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 
</div> 
</div> 
<!--<button id="btn">btn</button>--> 
<canvas id="myCanvas" width="1420" height="780" style="border: solid"></canvas> <!--整个画布--> 
<div id="eraseImg"> <!--橡皮形状--> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
js对象的比较
Feb 26 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
js实现字符串的16进制编码不加密
Apr 25 #Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 #Javascript
jquery操作select大全
Apr 25 #Javascript
jquery自定义下拉列表示例
Apr 25 #Javascript
jquery常用特效方法使用示例
Apr 25 #Javascript
javascript实现存储hmtl字符串示例
Apr 25 #Javascript
javascript作用域和闭包使用详解
Apr 25 #Javascript
You might like
php中apc缓存使用示例
2013/12/25 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
js确认删除对话框效果的示例代码
2014/02/20 Javascript
angularjs基础教程
2014/12/25 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
财务统计员岗位职责
2015/04/14 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
python tkinter实现定时关机
2021/04/21 Python
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
PyTorch中permute的使用方法
2022/04/26 Python