canvas 在线画图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

      /*画图大师来了*/

        #cans{border:1px solid red;}

    </style>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript">

        $().ready(function () {

           var d=$("#cans").get(0).getContext("2d");

            d.lineWidth=5;//  画笔粗细

            d.strokeStyle="blue"; // 画笔颜色

            var control=false; // 控制画

            $("#cans").bind("mousedown", function (e) {

//                alert(e.pageX); //鼠标坐标

//                alert(this.offsetLeft);   //指 $("#cans") 边框与浏览器窗口左边的距离

                var mouseX= e.pageX-this.offsetLeft;

                var mouseY= e.pageY-this.offsetTop;

                control=true;  // 鼠标按下时可以画

                d.moveTo(mouseX,mouseY);   // 开始画  起止位置

            });

            $("#cans").bind("mouseup", function (e) {

                control=false;

            });

            $("#cans").bind("mousemove", function (e) {

                if(control){

                    var mouseX= e.pageX-this.offsetLeft;

                    var mouseY= e.pageY-this.offsetTop;

                    d.lineTo(mouseX,mouseY); // 终止位置

                    d.stroke();  // 结束图形

                }

            });

        });

    </script>

</head>

<body>

<canvas id="cans" width="200" height="200">浏览器不支持canvas</canvas>

</body>

</html>

canvas 在线画图的更多相关文章

  1. HTML5简易在线画图工具

    继上次学习了HTML5的路径画圆做了动态时钟.异次元空间的反转做了运动的太阳系,这两天将画线.画圆.填充等知识点结合起来做了一个简易的在线画图工具: 查看DEMO:HTML5简易在线画图工具 功能包括 ...

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

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

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

    HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...

  4. canvas实例_在线画图工具

    fadsfklasdjfklasjdklfjasdlk;fjasd;lfjaskl;dfjal

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

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

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

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

  7. 使用Canvas制作画图工具

      前  言 JRedu canvas是HTML5中重要的元素之一,canvas元素使用JavaScript在网页上绘制图像,画布是一个矩形区域,我们可以控制其每一个元素,并且canvas拥有多种的绘 ...

  8. 微信小程序 base64图片在canvas上画图

    上代码 wxml <canvas canvas-id="myCanvas" style="width:400px;height:400px;">&l ...

  9. html5 canvas 自定义画图裁剪图片

    html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...

随机推荐

  1. 基于REST架构的Web Service设计

    来自: http://www.williamlong.info/archives/1728.html 先前我曾经介绍过利用Apache Axis实现基于SOAP的Web Service实现技术和相关代 ...

  2. Shell脚本获得变量值作为新变量一部分的值

    最近使用shell写一个发布脚本时,由于shell编程是边学便用的缘故,经验不足,中间遇到一个问题,一个变量的值作为一个新变量的一部分,而我要根据变量获得新变量的值,以前没有遇到过.网络搜索一番,最后 ...

  3. WSP （无线会话协议）

    WSP (无线会话协议) WSP是在无线应用协议(WAP:Wireless Application Protocol )组中的协议,用两种服务提供无线应用环境一个稳定的接口. 中文名 WSP WAP ...

  4. 菜鸟学习Spring Web MVC之二

    有文章从结构上详细讲解了Spring Web MVC,我个菜鸟就不引据来讲了.说说强悍的XP环境如何配置运行环境~~ 最后我配好的环境Tomcat.Spring Tool Suites.Maven目前 ...

  5. [原] Android持续优化 - 提高流畅度

    一．形象的感官一下流畅度概念 1. 这是官方给出的概念:Android流畅运行,需要运行60帧/秒, 则需要每帧的处理时间不超过16ms. 2. 每秒帧数,实际上就是指动画或视频每秒放映的画面数.因此 ...

  6. 我所使用的一个通用的Makefile模板

    话不多说,请看: 我的项目有的目录结构有: dirls/ ├── include │   └── apue.h ├── lib │   ├── error.c │   ├── error.o │   ...

  7. Python字符串基础操作

    ==============字符串======== >>> s1='www.baidu.com' >>> type(s1) <type 'str'> & ...

  8. 第一次学习QT

    跟着大神学:http://www.cnblogs.com/tornadomeet/archive/2012/06/25/2561007.html

  9. C++ Set

    set集合容器:实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的位置,以保证每个子树根节点键值大于左子树所有节点的键值,小于右子树所有节点的键值:另外,还 ...

  10. 《转》VS2012发布网站详细步骤

    本文转载自MannyGuo 如果给您带来不便请联系博主 1.打开你的VS2012网站项目,右键点击项目>菜单中 重新生成一下网站项目:再次点击右键>发布: 2.弹出网站发布设置面板,点击& ...