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 相关文章推荐
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
实用的Vue开发技巧
May 30 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
JS canvas实现画板和签字板功能
Feb 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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Pytorch之parameters的使用
2019/12/31 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
绩效管理实施方案
2014/03/19 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers