最近刚学了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. python中set和frozenset方法和区别

    set(可变集合)与frozenset(不可变集合)的区别:set无序排序且不重复,是可变的,有add(),remove()等方法.既然是可变的,所以它不存在哈希值.基本功能包括关系测试和消除重复元素 ...

  2. 【Qt】使用QProcess调用其它程序或脚本

    大概试了一下,还是不错的,不过字符编码问题还不太好解决: 代码: #include "mainwindow.h" #include "ui_mainwindow.h&qu ...

  3. sed的惯常用法

    1:注释掉某一行这个经常会遇到的,把配置文件里某一行注释掉.让他不起作用.sed -i -e ’121 s/^/#/’ /usr/local/apache2/conf/httpd.conf上面一行命令 ...

  4. 实现弹出收回菜单效果ios源码

    REMenu能够提供下弹出来的菜单,跳转到不同的vc后菜单便会收起.菜单的弹收都有回弹(bounce)的效果.效果图: <ignore_js_op> 使用方法: 先把REMenu的文件夹复 ...

  5. RegisterStartupScript和RegisterClientScriptBlock的区别

    1.  //注册到 <form> 尾部 ,HTML元素已加载完毕    this.Page.ClientScript.RegisterStartupScript(this.GetType( ...

  6. ipv4、ipv6的socket同时监听“bind: Address already in use”的解决方法

    创建ipv4和ipv6的socket,同时监听某个端口的ipv4和ipv6报文,运行时bind函数执行失败,提示“bind: Address already in use”.原因:ipv6的socke ...

  7. 基于opencv网络摄像头在ubuntu下的视频获取

     基于opencv网络摄像头在ubuntu下的视频获取 1  工具 原料 平台 :UBUNTU12.04 安装库  Opencv-2.3 2  安装编译运行步骤 安装编译opencv-2.3  参 ...

  8. What is the difference between differed processing mode and interactive mode?

     Every time you access and navigate through the fields on a page in PeopleSoft there are events such ...

  9. [leetcode]_Longest Substring Without Repeating Characters

    问题:求一个字符串中最长不重复子串的长度. 直接思路:以每个字符为出发计算最长不重复子串.TLE.O(n2),HashMap存储字符出现的位置. 代码: public int lengthOfLong ...

  10. Cache-control使用：header('Cache-control:private')

    发布:thebaby   来源:net     [大 中 小] 转自:http://www.jbxue.com/article/5624.html网页缓存由 HTTP消息头中的“Cache-contr ...