最近刚学了canvas，写个小应用练习下

源代码

 <!DOCTYPE>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>無標題文件</title>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

 <script type="text/javascript">

 var drawable=false;

 $(function(){

     $("#drawOnBoard").css({"background-color":$("#backgroundcolorChooser").val()});

 });

 function changeBackgroundColor()

 {

     $("#drawOnBoard").css({"background-color":$("#backgroundcolorChooser").val()});

 }

 function setDrawable(sdrawable)

 {

     drawable=sdrawable;

 }

 function beginDrawPicture(event)

 {

     if(drawable==true)

     {

     var canvas=$("#drawOnBoard");

     canvas=canvas[0];

     var content=canvas.getContext("2d");

     var mouseX=event.clientX;

     var mouseY=event.clientY;

     content.beginPath();

     content.arc(mouseX,mouseY,$("#slider-fill").val()*2,0,Math.PI*2,true);

     content.closePath();

     content.fillStyle=$("#pencolorChooser").val();

     content.fill();

     }

 }

 </script>

 <style type="text/css">

 .chooseBar{

     display:inline-block;

     width:200px;

 }

 div.ui-input-text{

     display:inline-block;

     width:270px;

 }

 div.ui-slider{

     display:inline-block;

     width:300px;

 }

 </style>

 </head>

 <body>

 <canvas id="drawOnBoard" width="600px" height="600px" onmousedown="setDrawable(true);" onMouseMove="beginDrawPicture(event);" onMouseUp="setDrawable(false);" style="border:5px wheat solid;background-color:white;float:left;"></canvas>

 <div style="float:left;margin-top:50px;margin-left:20px;">

 改变画笔颜色：<input type="color" id="pencolorChooser" class="chooseBar"/>

 <br/>

 改变画板颜色：<input type="color" id="backgroundcolorChooser" value="#ffffff" onChange="changeBackgroundColor();" class="chooseBar"/>

 <br/>

 改变画笔大小：<input type="range" name="slider-fill" id="slider-fill" value="5" min="1" max="10" step="1" data-highlight="true" class="chooseBar">

 </div>

 </body>

 </html>

运行效果如图

仍然有一些问题：

改变浏览器位置时实际绘画位置和鼠标位置有差

滑鼠走动过快会产生断点

希望学习更多知识以后来改进

[原创]基于html5新标签canvas写的一个小画板的更多相关文章

  1. canvas写的一个小时钟demo

    <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...

  2. HTML5新标签<canvas>

    基本用法 首先在body中写个<canvas>,设定大小,个人建议大小要在行内设置,不然在部分情况下会发生错误. CSS部分 给canvas加个边框,这边框只是为了方便看出canvas的边 ...

  3. 【HTML5】如何处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...

  4. HTML5新标签 w3c

    w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...

  5. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  6. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  7. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  8. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

  9. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

随机推荐

  1. 【drp 9】Servlet生命周期

    一.基本概念 Servlet(Server Applet):全称Java Servlet,是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容.狭义的Servlet ...

  2. css透明属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Magento后台界面全局样式修改之——font-weight

    路径: \app\design\adminhtml\Magento\backend\web\app\setup\styles\less\lib\_variables.less

  4. windows7安装远程服务器AD域管理工具

    目的:在win7上安装“远程服务器管理工具”,这样可以在客户端进行对服务器的AD域的操作,避免了远程登陆进服务器的麻烦. 前提条件:一般此工具只有管理员才具有有效使用权限,所以,在域administr ...

  5. ASP.NET验证控件二

    RequiredFieldValidator 验证控件 页面布局: <div> <h1>RequiredFieldValidator 验证控件</h1>   用户名 ...

  6. Apache开启Rewrite伪静态

    环境:Windows 2003 Apache 2.2 加载Rewrite模块 在conf目录下httpd.conf中找到 去掉# LoadModule rewrite_module modules/m ...

  7. CentOS 6破解Mysql5.5的办法

    首先,你必须要有操作系统的root权限了.要是连系统的root权限都没有的话,先考虑root系统再走下面的步骤.类似于安全模式登录系统,有人建议说是pkill mysql,但是我不建议哈.因为当你执行 ...

  8. Java基本开发环境搭建(适合第一次使用)

    Java基本开发环境搭建(适合第一次使用) 编写人:cc 阿爸 2013-10-17 一.开发工具获取 1.开发工具包JDK l  下载地址: 到ORACLE公司官方网站(http://www.ora ...

  9. habse的CopyTable

    需求:对hbase的一张表进行拷贝 一.table1的内容如下 hbase(main)::> scan 'table1' ROW COLUMN+CELL column=f1:age, times ...

  10. 认识php钩子-转白俊遥的博客

    认识php钩子-转载白俊遥的博客 我们先来回顾下原本的开发流程:产品汪搞出了一堆需求:当用户注册成功后需要发送短信.发送邮件等等:然后聪明机智勇敢的程序猿们就一扑而上:把这些需求转换成代码扔在 用户注 ...