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. 织梦dedecms调用子栏目的方法

    织梦调用子栏目名称在栏目.文章页及首页的方法是有区别的.首页的调用方法和在栏目的调用基本是一样的,如下: {dede:channel typeid=''} <li><h3>&l ...

  2. 神器Alfred使用

    神器官网:http://www.alfredapp.com/ 许多人装好了之后就再也没有怎么使用过,这软神器, 一直不明白它为什么叫神器,最近研究了一下,真的是,很多东西我们没有好好利用 部分使用功能 ...

  3. meclipse中project facet问题

    meclipse中project facet问题 (2012-02-14 14:59:48) 转载▼ 标签: 杂谈 分类: 技术 一般出现在从别处import的项目上,只有项目文件夹上有红叉,其他地方 ...

  4. PHP FORUM

    1.index.php <html> <!--功能:php论坛标题部分--> <head><meta http-equiv="content-typ ...

  5. WPF 组合快捷键

    if(e.KeyStates == Keyboard.GetKeyStates(Key.F4) && Keyboard.Modifiers == ModifierKeys.Alt) { ...

  6. 我的电脑右下角的日期也不见了只剩下时间，Win7系统，请问是什么原因啊？

    A:今天是2013/10/10,日期变为八位,宽度就不够了,把任务栏拉宽就好了 Q:win7 任务栏时间区可以拉宽吗?使之显示日期等 A:你的任务栏锁定了的,右键单击任务栏-锁定任务栏前面的勾去掉,鼠 ...

  7. iOS 用instancetype代替id作返回类型有什么好处？

    2014-07-07更新:苹果在iOS 8中全面使用instancetype代替id Steven Fisher:只要一个类返回自身的实例,用instancetype就有好处. @interface ...

  8. JavaScript中，window.opener是什么？window.parent和window.opener有啥区别？

    来自CSDN的问答: window.opener是什么啊? ++++++++++++++++++++++++++++++++++++++++++++++++++ 弹出本窗体的句柄 比如你想点一个按钮直 ...

  9. Systemd入门教程：命令篇

    导读 传统的Linux系统启动过程主要由著名的init进程(也被称为SysV init启动系统)来处理,而基于init的启动系统被认为有效率不足的问题,systemd是Linux系统机器的另一种启动方 ...

  10. UIScrollview使用

    改变内容偏移 - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;  // animate at const ...