HTML5 canvas 在线画笔绘图工具(一) 功能介绍

这是我用Javascript写的第一个程序，在写的过程中走了很多弯路，所以写完之后想分享出来，给与我一样的初学者做为学习的参考，同时在编写这个程序时我也碰到一些问题，这里我也会一并的提出来给大家讨论，让我们都能得到进步。因为是初学javascript，所以水平较低，欢迎大家提出批评意见。

程序包含以下内容 1、工具条  2、基本的绘图命令，目前仅有 直线、矩形、圆 ，以后有空还会增加一些命令 3、线型选择

4、颜色选择 5、保存图素 6、打开图形。

下面是我儿子的作品，麻烦大家赞一个，谢谢

打开保存图片的效果

在线演示地址

HTML5 canvas 在线画笔绘图工具（一）的更多相关文章

  1. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  2. HTML5 canvas 在线画笔绘图工具（二）

    Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时 ...

  3. HTML5 canvas 在线画笔绘图工具（四）

    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成. TDrawHandler需要完成以下工作 1.聚集类用于管理绘图的命令 TCommand 2.管理鼠标事件 ...

  4. html5 canvas在线文本第二步设置（字体边框）等我全部写完，我会写在页面底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML5 canvas 在线涂鸦

    插件地址 http://bencentra.github.io/jq-signature/ 采用技术 jq-signature.min.js Developed using jQuery 2.1.4. ...

  6. 18个基于 HTML5 Canvas 开发的图表库

    如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...

  7. 基于HTML5 Canvas和jQuery 的绘图工具的实现

    简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...

  8. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  9. Processon 一款基于HTML5的在线作图工具

    CSDN的蒋涛不久前在微博上评价说ProcessOn是web版的visio,出于好奇私下对ProcessOn进行了一番研究.最后发现无论是在用户体验上,还是在技术上,ProcessOn都比微软的Vis ...

随机推荐

  1. 启动安卓模拟器报错 emulator: ERROR: x86_64 emulation currently requires hardware acceleration! CPU acceleration status:HAXM must be updated(version 1.1.1<6.0.1) 解决办法

    启动安卓模拟器报错 emulator: ERROR: x86_64 emulation currently requires hardware acceleration!  CPU accelerat ...

  2. Advanced Bash-Scripting Guide

    在UC Berkeley 课程代号CS9E上看到的资源 http://www-inst.eecs.berkeley.edu/~selfpace/studyguide/cs9e/ http://www. ...

  3. 错误：指定的任务可执行文件位置 D:\Android\platform-tools\aapt.exe 无效

    android-apt-compiler: Cannot run program "D:\android-sdk\platform-tools\aapt 装上IntelliJ IDEA /下 ...

  4. 原生javascript添加引用js文件

            function addScriptTag(src) {                         var script = document.createElement(&qu ...

  5. linux----设置、添加别名（alias,unalias）

    以下的说明针对centOS. 查看当前的别名 在命令行下,直接输入alias来查看. 添加临时的别名 方法为:alias[别名]=[指令名称] 该方法只是临时的,仅对当前终端有效,因此重启系统或在其他 ...

  6. HTTP缓存 1.0 vs 1.1

    在“使用ETag跟踪用户”中有一点被忽略了,因为要用这张小图统计统计uv, 所以要求浏览器必须每次都要发送这个图片的请求.这需要服务器对图片的缓存策略做设置. http/1.0 和 http/1.1 ...

  7. JUnit三分钟教程 ---- 快速起步

    JUnit三分钟教程 ---- 快速起步 摘自http://lavasoft.blog.51cto.com/62575/65625/ JUnit是个好东西,做大点的项目离不开这东西,实际中用的时候也因 ...

  8. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

  9. DM6437 dsp系列之启动过程全析(2)—AIS文件解析

    本文均属自己阅读源码的点滴总结,转账请注明出处谢谢. 欢迎和大家交流.qq:1037701636 email: gzzaigcn2009@163.com,gzzaigcn2012@gmail.com ...

  10. 动态SQL的执行，注：exec sp_executesql 其实可以实现参数查询和输出参数的

    本文转自:http://www.cnblogs.com/hnsdwhl/archive/2011/07/23/2114730.html 当需要根据外部输入的参数来决定要执行的SQL语句时,常常需要动态 ...