<!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 画板的更多相关文章

  1. html5 canvas画板

    点击查看演示地址 <!DOCTYPE HTML> <html> <title>HTML5-CanvasDrawDemo</title> <meta ...

  2. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  3. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  4. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  5. html5 canvas 涂鸦画板

    html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100 ...

  6. Atitit html5 Canvas 如何自适应屏幕大小

    Atitit  html5 Canvas 如何自适应屏幕大小     可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...

  7. canvas——画板

    注意部分: canvas的height和width不能再css中设定,应该在html中设定,否则会影响页面的分辨率. 效果图: 图1: 代码 css: #canvas{ cursor: crossha ...

  8. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  9. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

随机推荐

  1. 零基础如何迅速学习HTML5？新手小白学习web前端H5自白！

    很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...

  2. 使用MS Test做单元测试

    声明:本篇博客翻译自:http://www.c-sharpcorner.com/article/unit-testing-with-ms-tests-in-c-sharp/ 写在翻译之前: 依然清晰的 ...

  3. ajax异步传送数据的方法

    1, 此方法为ajax异步发送后台数据的方法 var payment_id=$(this).attr("name"); alert(payment_id); $('.label') ...

  4. .net core2.0下使用Identity改用dapper存储数据

    前言. 已经好多天没写博客了,鉴于空闲无聊之时又兴起想写写博客,也当是给自己做个笔记.过了这么些天,我的文笔还是依然那么烂就请多多谅解了.今天主要是分享一下在使用.net core2.0下的实际遇到的 ...

  5. react native一键分享功能实现&原理和注意点（支持微信、qq、新浪微博等）

    目前手机使用的一键分享SDK比较主流的有两个:一个是ShareSDK,另一个是友盟分享. 又因为友盟功能比较多且比较全,比如说友盟统计.友盟推送等,所以本文重点介绍的是友盟分享功能在rn上的应用以及要 ...

  6. Java注解Annotation详解

    从JDK5开始,Java增加了Annotation(注解),Annotation是代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相应的处理.通过使用Annotation,开发人员可 ...

  7. Vuex非常适合新手的教程，保教不会！

    本讲解基于Vue-cli(脚手架)搭建的项目. Vuex 数据状态管理工具,整个流程类似依赖注入,相当于预先定义,倒推.(个人理解) 1. 安装vuex  命令行输入 npm install vuex ...

  8. Spring学习笔记(二)之装配Bean

    一,介绍Bean的装配机制 在Spring中,容器负责对象的创建并通过DI来协调对象之间的关系.但是我们要告诉Spring创建哪些Bean并且如何将其装配在一起.,装配wiring就是DI依赖注入的本 ...

  9. 运行java web项目时报错：Several ports (8005, 8080, 8009) required

    运行java web项目时报错:Several ports (8005, 8080, 8009) required 如下图 之所以报上面的错误是因为安装Tomcat的时候,已经把端口8005,8080 ...

  10. 十二、Hadoop学习笔记————Hive的基本原理

    一般用户用CLI(命令行界面)接口,元数据库含有表结构 单用户.多用户.远程服务 生成db文件,只能单客户端使用数据库 多用户是最常用的使用模式 配置与多用户一致 数据格式用户自定义 所有的表都存于改 ...