最近刚学了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. 多XML追加操作

    假设要统计当前系统中所有的试卷进行分析,试卷是以XML格式存储的,所有这就需要将所有零散的XML文件整合起来,处理成一个完整的XML文件,进行分析, 下面是简单额处理方法: 当前XML文件格式: &l ...

  2. druid parser

    有没有好用的开源sql语法分析器? - 匿名用户的回答 - 知乎 druid parser

  3. Win8系统安装NET Framework 3.5的方法

    1)找到下载过的Win8系统盘,解压到某个目录下,例如 F:, 找到解压的系统盘目录中"sources\sxs"文件夹 2)以管理员身份运行cmd命令,执行下面的命令: dism. ...

  4. Hbase多master

    单台master的配置 hbase.master master:60000 这是我们通常配置的,这样就定义了master是的ip和端口. 但是当我们需要配置多台master进行,我们只需要提供端口,因 ...

  5. HttpClient入门

    HttpClient入门 HttpClient 是 Apache Jakarta Common 下的子项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 H ...

  6. 乐够GO应用源码完整版

    乐够GO应用源码完整版 V1.0,系统2.3以上使用,需要联网,每天定时更新数据,实现了对文章赞的功能,以及常用的评论功能,还有生活的职业的相关功能,如查找功能,分类的分类等功能,具体大家可以看看应用 ...

  7. 命名空间中的“MvcBuildViews”。 无效

    VS2013转VS2010时出现如下错误: 错误提示: 警告 1 元素 命名空间“http://schemas.microsoft.com/developer/msbuild/2003”中的“Prop ...

  8. 【译】Spark官方文档——Spark Configuration（Spark配置）

    注重版权,尊重他人劳动 转帖注明原文地址:http://www.cnblogs.com/vincent-hv/p/3316502.html   Spark主要提供三种位置配置系统: 环境变量:用来启动 ...

  9. delphi xe6 打开andoridGPS设置

      Androidapi.JNI.JavaTypes,    Androidapi.JNI.GraphicsContentViewText,   Androidapi.JNI.Location,   ...

  10. c# float和double的“坑”

    定义一个float类型的变量=0.7,结果在IL中却是0.69999999. 乘以10之后,获取整数值.得到的却是6.通过查看IL,竟然被转换成double类型再转换.就变成6了. Demo: IL: ...