最近刚学了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. CSS3之选择器

    总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器 选择器 举例 例子描述 element1~element2 p~a 选择前面有 < ...

  2. js 打开PDF

    用插件打开PDF的一个超连接 但是谷歌了很久 ,发现了一个很好的方法 就是借google 来打开一个PDF ,而不下载PDF: _yourID.setAttribute('onclick'," ...

  3. WWF3常用类 <第十一篇>

    一.WorkflowRuntime类 System.Workflow.Runtime.WorkflowRuntime是工作流的运行引擎.WorkflowRuntime在宿主中以自己独立的线程运行,它可 ...

  4. JavaScriptSerializer.MaxJsonLength属性问题

    JavaScriptSerializer.MaxJsonLength属性用于获取或设置接受的JSON字符串的最大长度,超出设定值时序列化或反序列化会失败.常见的出错的场景有: 1.序列化: 以下代码在 ...

  5. Loadrunner：error -86401 Failed to connceted xxx.xxx.xxx.xxx:25问题解决

    [转自:http://www.51testing.com/html/00/130600-3578408.html]windows 2003上安装的LoadRunner11做为负载机在SMTP协议压测时 ...

  6. hbase 各个概念，region，storefile

    HBase中有两张特殊的Table,-ROOT-和.META. .META.:记录了用户表的Region信息,它可以有多高region(这的意思是说.META.表可以分 裂成多个region,和用户表 ...

  7. Find out who the “mole” is?

    Blueheat Company’s  production server was out of order again. The CEO was very upset and want their ...

  8. 2014年3月1日 Start && Unique Binary Search Trees

    早上和面试官聊天, 才发现自己的基础下降的有点厉害, 过去那个飘逸写程序的小青年, 如今有点走下坡路了. 可惜我不服,所以要开始做题,把水平恢复上来,能力是最重要的. 最近在做LeetCodeOJ的题 ...

  9. Composer -- PHP依赖管理的用法

    1:下载 1.1:方法一: 通过PHP来安装 cd /home/composer curl -sS https://getcomposer.org/installer | php  #这个命令会下载c ...

  10. JS数组(Array)处理函数总结

    1.concat() 连接两个或更多的数组该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.例如: <script type="text/javascript"&g ...