html5 canvas画板

点击查看演示地址

<!DOCTYPE HTML>

<html>

<title>HTML5-CanvasDrawDemo</title>

<meta charset="utf-8"/>

<body>

    <style>

		div {

			border:0;

			margin:auto;

			width:500px;

		}

		#div_head {

			border:0;

		}

		#div_head span{

		font-size:10px;

		}

		body canvas

        {

            border: 2px solid blue;

			border-radius:10px;

        }

		#txt_alpha { width:20px;}

		#txt_width{ width:30px;}

		footer {

			margin:auto;

			text-align:center;

			font-size:10px;

			}

    </style>

	<div id="div_head">

	<fieldset>

	<legend>Controller</legend>

	Color:<input id='btn_color' type='color' />

	Alpha:<input id="txt_alpha" type='range' min="0" max="1" step="0.1" value="1"/>

	Size:

	<input id='txt_width' type='range' min="1" max="10" step="1" value="4"/>

	<input id="btn_pre" type='button' value="撤销"/>

	<input id="btn_next" type='button' value="恢复"/>

	<input id="btn_clear" type='button' value="Clear"/>

	</fieldset>

	</div>

	<div>

    <canvas id="drawgph" width="500" height="400" >

	<span><font color='red'>浏览器不支持Html5中的Canvas元素!</font></span>

	</canvas>

	</div>

	<footer>

	<span>Google Chrome 版本 33.0.1750.154 m 测试通过!</span></br>

	<span>IE9.0 不支持颜色选择,需手动填入颜色值,格式为“#FFFFFF”。</span></br>

	<span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=170515071&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:170515071:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a></span></br>

	<span>

	<a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2qKzu7Wjr_-q7Oiaq6v0ubW3" style="text-decoration:none;"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_12.png"/></a>

	</span>

	</footer>

	<script type="text/javascript">

		//检测浏览器版本

		var Sys = {};

        var ua = navigator.userAgent.toLowerCase();

        window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :

        document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :

        window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :

        window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :

        window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;

		if(Sys.ie>=9){//IE9.0目前不支持type=color

			document.getElementById('btn_color').value="#000000";

		}

        if(Sys.firefox) ver='Firefox: '+Sys.firefox;

        if(Sys.chrome) ver='Chrome: '+Sys.chrome;

        if(Sys.opera) ver='Opera: '+Sys.opera;

        if(Sys.safari) ver='Safari: '+Sys.safari;

        var obj = document.getElementById('drawgph');

        var ctx = obj.getContext('2d');

        var start_X = 0;//起点X轴位置

        var start_Y = 0;//起点Y轴位置

        var isMove = false;//是否绘制图形

		var history=[];//历史操作记录

		var count=0;//记录当前执行的步骤数(绘制+1;撤销-1 ;恢复+1)

		var colorObj=document.getElementById('btn_color');//颜色对象

		var alpha=document.getElementById('txt_alpha');//透明对象

		var size=document.getElementById('txt_width');//画笔宽度

        obj.addEventListener("mousedown", function (e) {

            start_X = e.pageX-e.target.offsetLeft;

            start_Y = e.pageY-e.target.offsetTop;

			//console.log('mousedown on ('+start_X+','+start_Y+')');

            isMove = true;

			ctx.lineWidth =size.value;

			ctx.strokeStyle=colorObj.value;

			ctx.globalAlpha=alpha.value;

			ctx.save();

        });

        obj.addEventListener("mousemove", function (e) {

            if (isMove) {

				ctx.beginPath();

				ctx.moveTo(start_X,start_Y);

				ctx.lineTo(e.pageX-e.target.offsetLeft, e.pageY-e.target.offsetTop);

                ctx.stroke();

				start_X = e.pageX-e.target.offsetLeft;

				start_Y = e.pageY-e.target.offsetTop;

            }

        });

        obj.addEventListener("mouseup", function (e) {

			ctx.restore();

			//如果有产生绘图则记录操作

			if(isMove){

				historyLog();

			}

            isMove = false;

			//如果在内部释放中断冒泡事件

			window.event.cancelBubble=true;

        });

		//防止用户画笔在画布范围外释放后回到画布持续绘画状态

		window.addEventListener('mouseup',function(e){

			ctx.restore();

			//如果有产生绘图则记录操作

			if(isMove){

				historyLog();

			}

			isMove=false;

		});

		//首次加载时保存空白画布历史记录

		window.addEventListener('load',historyLog);

		//Clear按钮清除画布内容

		btn_clear.onclick=function(){

			//console.log("Action: btn_clear.onclick" );

			ctx.clearRect(0,0,500,400);

			count=0;

			history=[];

			historyLog();

		}

		//撤销

		btn_pre.onclick=function(){

			count--;

			//console.log("撤销操作时变量Count:"+count);

			if(count==0){

				count++;

			}

			ctx.putImageData(history[count-1],0,0);

			//console.log(history);

		}

		//恢复

		btn_next.onclick=function(){

			//console.log("恢复操作时变量Count:"+count);

			if(history[count]){

				ctx.putImageData(history[count],0,0);

				count++;

			}

		}

		//记录操作

		function historyLog(){

			//console.log("记录操作时变量Count:"+count);

			history[count]=(ctx.getImageData(0,0,500,400));

			count++;

			//console.log(history);

		}

    </script>

</body>

</html>

点击查看演示地址

html5 canvas画板的更多相关文章

html5 canvas 画板
<!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...
一款基于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> 元素本身并没有绘制能力(它仅仅是 ...

随机推荐

ListView中item的最外层使用margin属性失效
参考文章:http://stackoverflow.com/questions/16278159/why-linearlayouts-margin-is-being-ignored-if-used-a ...
ReferenceError: Sys is not defined
项目框架MVC3 <form action="/Organization/Update" method="post" onclick="Sys. ...
javascript 过滤字符串中的中文与空格
js 如何过滤字符串里中文或空格呢?方法有很多种,我们可以使用替换与正则表达式来实现,本文向大家介绍两个简单的例子,感兴趣的码农可以参考一下. 1.javascript过滤空格: function m ...
制作东皇3.2的安装U盘-黑苹果之路
每次使用硬盘映像安装需要先装windows,制作东皇3.2安装分区,再装bootthink,再通过bootthink加载东皇3.2的分区进行安装,非常繁琐.尝试制作U盘来直接安装东皇3.2.过程如下: ...
零基础如何入门Python
编程零基础如何学习Python 如果你是零基础,注意是零基础,想入门编程的话,我推荐你学Python.虽然国内基本上是以C语言作为入门教学,但在麻省理工等国外大学都是以Python作为编程入门教学的. ...
使用Spring的Property文件存储测试数据－添加测试数据
测试数据直接写在Property文件中,如下图: application.properties是系统自动生成,我添加了两个Property文件:HomeTestData.properties和moto ...
SQL Server :Stored procedures存储过程初级篇
对于SQL Server,我是个拿来主义.很多底层的原理并不了解,就直接模仿拿着来用了,到了报错的时候,才去找原因进而逐步深入底层.我想,是每一次的报错,逼着我一点点进步的吧. 近期由于项目的原因,我 ...
关于 LimitedConcurrencyLevelTaskScheduler 的疑惑
1. LimitedConcurrencyLevelTaskScheduler 介绍这个TaskScheduler用过的应该都知道,微软开源的一个任务调度器,它的代码很简单, 也很好懂,但是我没有明 ...
Django中级篇之Model专题
ORM 就是用面向对象的方式去操作数据库的创建表以及增删改查等操作到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段使用 MySQLdb 来连接数据 ...
CA提供的身份认证配置弃用
场景:从CA网站登录,在CA主页点击我们集成到CA的业务系统图标进行跳转,发现业务系统登录过身份(没cookies),身份认证自动使用 url,跳转到CA登录页,造成二次登录 [Authorize] ...

html5 canvas画板

html5 canvas画板的更多相关文章

随机推荐

热门专题