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 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
js检测用户输入密码强度
Oct 22 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
JS出现404错误原理及解决方案
Jul 01 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安全编程之加密功能
2006/10/09 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php购物车实现代码
2011/10/10 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
PHP goto语句用法实例
2019/08/06 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
vue中appear的用法
2017/08/17 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
使用python实现个性化词云的方法
2017/06/16 Python
python画折线图的程序
2018/07/26 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
个人简历中的自我评价怎么写
2014/01/26 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
Python OpenGL基本配置方式
2022/05/20 Python