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中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 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+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP微信API接口类
2016/08/22 PHP
自己的js工具 Event封装
2009/08/21 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
详解vue表单——小白速看
2018/04/08 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
js数组去重的方法总结
2019/01/18 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python代码能做成软件吗
2020/07/24 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
大学生入党思想汇报
2014/01/01 职场文书
市场部管理制度
2014/02/02 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
PyTorch中的torch.cat简单介绍
2022/03/17 Python