html5 canvas 画板
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript结合html5 canvas实现的涂鸦板 - 分享JavaScript-sharejs.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" />
<meta name="description" content="javascript结合html5 canvas实现的涂鸦板,JavaScript分享网，js脚本，网页特效。网页模板，png图标，矢量图下载" />
<meta content="JavaScript,分享,JavaScript代码,Ajax,jQuery,网页模板,PNG图标，矢量图" name="keywords" />
</head>
<body>
<style>
*{margin:0;padding:0;}
.fa{width:740px;margin:0 auto;}
.top{margin:20px 0;}
.top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;}
.top .i1{background:#000000;}
.top .i2{background:#FF0000;}
.top .i3{background:#80FF00;}
.top .i4{background:#00FFFF;}
.top .i5{background:#808080;}
.top .i6{background:#FF8000;}
.top .i7{background:#408080;}
.top .i8{background:#8000FF;}
.top .i9{background:#CCCC00;}
#canvas{background:#eee;cursor:default;}
.font input{font-size:14px;}
.top .grea{background:#aaa;}
</style>
</head>
<body>
<div class="fa">
<div class="top">
<div id="color">
请选择画笔颜色：
<input class="i1" type="button" value="" />
<input class="i2" type="button" value="" />
<input class="i3" type="button" value="" />
<input class="i4" type="button" value="" />
<input class="i5" type="button" value="" />
<input class="i6" type="button" value="" />
<input class="i7" type="button" value="" />
<input class="i8" type="button" value="" />
<input class="i9" type="button" value="" />
</div>
<div class="font" id="font">
请选择画笔的宽度：
<input type="button" value="细" />
<input type="button" value="中" class="grea"/>
<input type="button" value="粗" />
</div>
<div>
<span id="error">假设有错误。请使用橡皮擦：</span>
<input id="eraser" style="width:60px;font-size:14px;"type="button" value="橡皮擦" />
</div>
<input id="clear" type="button" value="清除画布" style="width:80px;"/>
<input id="revocation" type="button" value="撤销" style="width:80px;"/>
<input id="imgurl" type="button" value="导出图片路径" style="width:80px;"/>
</div>
<canvas id="canvas" width="740" height="420">您的浏览器不支持 canvas 标签</canvas>
<div id="div1"></div>
</div>
<div id="html">
</div>
<script>
(function(){
var paint={
init:function()
{
this.load();
},
load:function()
{
this.x=[];//记录鼠标移动是的X坐标
this.y=[];//记录鼠标移动是的Y坐标
this.clickDrag=[];
this.lock=false;//鼠标移动前，推断鼠标是否按下
this.isEraser=false;
//this.Timer=null;//橡皮擦启动计时器
//this.radius=5;
this.storageColor="#000000";
this.eraserRadius=15;//擦除半径值
this.color=["#000000","#FF0000","#80FF00","#00FFFF","#808080","#FF8000","#408080","#8000FF","#CCCC00"];//画笔颜色值
this.fontWeight=[2,5,8];
this.$=function(id){return typeof id=="string"? document.getElementById(id):id;};
this.canvas=this.$("canvas");
if (this.canvas.getContext) {
} else {
alert("您的浏览器不支持 canvas 标签");
return;
}
this.cxt=this.canvas.getContext('2d');
this.cxt.lineJoin = "round";//context.lineJoin - 指定两条线段的连接方式
this.cxt.lineWidth = 5;//线条的宽度
this.iptClear=this.$("clear");
this.revocation=this.$("revocation");
this.imgurl=this.$("imgurl");//图片路径按钮
this.w=this.canvas.width;//取画布的宽
this.h=this.canvas.height;//取画布的高
this.touch =("createTouch" in document);//判定是否为手持设备
this.StartEvent = this.touch ? "touchstart" : "mousedown";//支持触摸式使用相应的事件替代
this.MoveEvent = this.touch ? "touchmove" : "mousemove";
this.EndEvent = this.touch ? "touchend" : "mouseup";
this.bind();
},
bind:function()
{
var t=this;
/*清除画布*/
this.iptClear.onclick=function()
{
t.clear();
};
/*鼠标按下事件，记录鼠标位置。并绘制，解锁lock，打开mousemove事件*/
this.canvas['on'+t.StartEvent]=function(e)
{ var touch=t.touch ? e.touches[0] : e;
var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点
var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标，以画布左上角为起点
if(t.isEraser)
{
/*
t.cxt.globalCompositeOperation = "destination-out";
t.cxt.beginPath();
t.cxt.arc(_x, _y,t.eraserRadius, 0, Math.PI * 2);
t.cxt.strokeStyle = "rgba(250,250,250,0)";
t.cxt.fill();
t.cxt.globalCompositeOperation = "source-over";
*/
t.resetEraser(_x,_y,touch);
}else
{
t.movePoint(_x,_y);//记录鼠标位置
t.drawPoint();//绘制路线
}
t.lock=true;
};
/*鼠标移动事件*/
this.canvas['on'+t.MoveEvent]=function(e)
{
e.stopPropagation();////////////////////////////////////////////////禁止冒泡事件/////////////////////////////////////////
var touch=t.touch ? e.touches[0] : e;
if(t.lock)//t.lock为true则运行
{
var _x=touch.clientX - touch.target.offsetLeft;//鼠标在画布上的x坐标，以画布左上角为起点
var _y=touch.clientY - touch.target.offsetTop;//鼠标在画布上的y坐标。以画布左上角为起点
if(t.isEraser)
{
//if(t.Timer)clearInterval(t.Timer);
//t.Timer=setInterval(function(){
t.resetEraser(_x,_y,touch);
//},10);
}
else
{
t.movePoint(_x,_y,true);//记录鼠标位置
t.drawPoint();//绘制路线
}
}
};
this.canvas['on'+t.EndEvent]=function(e)
{
/*重置数据*/
t.lock=false;
t.x=[];
t.y=[];
t.clickDrag=[];
clearInterval(t.Timer);
t.Timer=null;
};
this.revocation.onclick=function()
{
t.redraw();
};
this.changeColor();
this.imgurl.onclick=function()
{
t.getUrl();
};
/*橡皮擦*/
this.$("eraser").onclick=function(e)
{
t.isEraser=true;
t.$("error").style.color="red";
t.$("error").innerHTML="您已使用橡皮擦！";
};
},
movePoint:function(x,y,dragging)
{
/*将鼠标坐标加入到各自相应的数组里*/
this.x.push(x);
this.y.push(y);
this.clickDrag.push(y);
},
drawPoint:function(x,y,radius)
{
for(var i=0; i < this.x.length; i++)//循环数组
{
this.cxt.beginPath();//context.beginPath() , 准备绘制一条路径
if(this.clickDrag[i] && i){//当是拖动并且i!=0时，从上一个点開始画线。
this.cxt.moveTo(this.x[i-1], this.y[i-1]);//context.moveTo(x, y) , 新开一个路径，并指定路径的起点
}else{
this.cxt.moveTo(this.x[i]-1, this.y[i]);
}
this.cxt.lineTo(this.x[i], this.y[i]);//context.lineTo(x, y) , 将当前点与指定的点用一条笔直的路径连接起来
this.cxt.closePath();//context.closePath() , 假设当前路径是打开的则关闭它
this.cxt.stroke();//context.stroke() , 绘制当前路径
}
},
clear:function()
{
this.cxt.clearRect(0, 0, this.w, this.h);//清除画布，左上角为起点
},
redraw:function()
{
/*撤销*/
this.cxt.restore();
},
preventDefault:function(e){
/*阻止默认*/
var touch=this.touch ? e.touches[0] : e;
if(this.touch)touch.preventDefault();
else window.event.returnValue = false;
},
changeColor:function()
{
/*为按钮加入事件*/
var t=this,iptNum=this.$("color").getElementsByTagName("input"),fontIptNum=this.$("font").getElementsByTagName("input");
for(var i=0,l=iptNum.length;i<l;i++)
{
iptNum[i].index=i;
iptNum[i].onclick=function()
{
t.cxt.save();
t.cxt.strokeStyle = t.color[this.index];
t.storageColor=t.color[this.index];
t.$("error").style.color="#000";
t.$("error").innerHTML="假设有错误，请使用橡皮擦：";
t.cxt.strokeStyle = t.storageColor;
t.isEraser=false;
}
}
for(var i=0,l=fontIptNum.length;i<l;i++)
{
t.cxt.save();
fontIptNum[i].index=i;
fontIptNum[i].onclick=function()
{
t.changeBackground(this.index);
t.cxt.lineWidth = t.fontWeight[this.index];
t.$("error").style.color="#000";
t.$("error").innerHTML="假设有错误，请使用橡皮擦：";
t.isEraser=false;
t.cxt.strokeStyle = t.storageColor;
}
}
},
changeBackground:function(num)
{
/*加入画笔粗细的提示背景颜色切换，灰色为当前*/
var fontIptNum=this.$("font").getElementsByTagName("input");
for(var j=0,m=fontIptNum.length;j<m;j++)
{
fontIptNum[j].className="";
if(j==num) fontIptNum[j].className="grea";
}
},
getUrl:function()
{
this.$("html").innerHTML=this.canvas.toDataURL();
},
resetEraser:function(_x,_y,touch)
{
/*使用橡皮擦-提醒*/
var t=this;
//this.cxt.lineWidth = 30;
/*source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,所有浏览器通过*/
t.cxt.globalCompositeOperation = "destination-out";
t.cxt.beginPath();
t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2);
t.cxt.strokeStyle = "rgba(250,250,250,0)";
t.cxt.fill();
t.cxt.globalCompositeOperation = "source-over"
}
};
paint.init();
})();
</script>
<div style="clear:both"></div>
</body>
</html>
html5 canvas 画板的更多相关文章
- html5 canvas画板
点击查看演示地址 <!DOCTYPE HTML> <html> <title>HTML5-CanvasDrawDemo</title> <meta ...
- 一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
- html5 canvas 涂鸦画板
html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100 ...
- Atitit html5 Canvas 如何自适应屏幕大小
Atitit html5 Canvas 如何自适应屏幕大小 可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...
- canvas——画板
注意部分: canvas的height和width不能再css中设定,应该在html中设定,否则会影响页面的分辨率. 效果图: 图1: 代码 css: #canvas{ cursor: crossha ...
- HTML5 canvas 在线画笔绘图工具（三）
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
随机推荐
- express的学习，与使用
最近在学习vue的一个实战项目,碰到一个express,当时很萌,就随便看了看................ expres是基于node 的一个web框架, 首先可以找到它的官网照着学习 这里只讲一 ...
- 借助 frp 随时随地访问自己的树莓派
前言 看了知乎上的一个「树莓派」是什么以及普通人怎么玩? 的高票回答,双十一时间,果断买了一个树莓派 3. 周一(11.13) 到的货.我目前只想实现一个简单的功能 -- 想从任意位置访问我的树莓派. ...
- Jxl创建Excel文件和解析Excel文件
import java.io.File; import jxl.Workbook; import jxl.write.Label; import jxl.write.WritableSheet; im ...
- Dev控件treeList
之前做过一段时间,当时copy 的别人的代码,这就就把节点给添加了,上次帮同事做也发现了这个问题,当时没有记下来,今天有做,磨了半天,记下来吧. Dev控件treeList 要添加节点第一步是右键添加 ...
- [转载] 基于Dubbo框架构建分布式服务
转载自http://shiyanjun.cn/archives/1075.html Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务 ...
- 10. 管理Apache ZooKeeper配置
Tips 有关ZooKeeper部署和管理的详细说明,请参阅官方文档http://zookeeper.apache.org/doc/trunk/zookeeperAdmin.html. 1. 配置Zo ...
- react入门到进阶（二）
一.react属性与事件 1.State属性 State,翻译过来是状态的意思,所以它就代表着组件的状态.React把用户界面(UI)当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界 ...
- Unity灯光烘焙
Unity3D烘焙技术 一.Light灯光场景烘焙1.理论理解:(1)烘焙背景:在一个场景中,由于灯光组件起到实时渲染的效果,并直接与计算机硬件GPU渲染器进行交互作用,因此对计算机显卡性能不良,以至 ...
- dp资源分配问题
noip考试中dp中的资源分配问题是一大重点(不定时更新) 以下是一些例题 1.乘积最大 //Gang #include<iostream> #include<cstring> ...
- （翻译）使用Api分析器与Windows兼容包来编写智能的跨平台.NET Core应用
本文翻译自Scott Hanselman博客: https://www.hanselman.com/blog/WritingSmarterCrossplatformNETCoreAppsWithThe ...