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. (转)CSS3 @font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  2. C# 获取文件MD5校验码

    using System; using System.IO; using System.Security.Cryptography; using System.Text; public class M ...

  3. NoClassDefFoundError: org/slf4j/LoggerFactory解决

    缺少slf4j-api-1.5.2,slf4j-log4j12-1.5.2,log4j-1.2.8这几个包,导入即可

  4. 学习Linux下的IP地址地理位置信息显示工具nali

    首先详细教程已经有前辈做了详细的安装和使用介绍,本人只是参照学习和记录下自己的实际操做. 本文参考档:http://www.cnblogs.com/mchina/archive/2012/12/24/ ...

  5. IIS假死状态处理

    为应用程序池 'DefaultAppPool' 提供服务的进程关闭时间超过了限制  服务器经常产生“应用程序池 'DefaultAppPool' 提供服务的进程关闭时间超过了限制.进程 ID 是 '2 ...

  6. IOS APP的所有图标尺寸规范

    转自: http://blog.csdn.net/chonbj/article/details/25133247 像我一样记不住iOS应用图标像素尺寸的开发者不在少数,我经常需要查询不同设备上的应用尺 ...

  7. 转：PCL+VS2010环境配置

    1.下载 http://www.pointclouds.org/downloads/windows.html出下载PCL完全安装包1.6.0 all-in-one-installer,我的电脑是32位 ...

  8. ■SQL注入自学[第三学:注入点的读写、out_file]

    00x1 判断是否可读 code: http:.php?id and (select count(*) from mysql.user) >0--/*返回正确的话,说明没有是有读的权限.返回错误 ...

  9. ZeroMQ(java)之I/O线程的实现与组件间的通信

    算是开始读ZeroMQ(java)的代码实现了吧,现在有了一个大体的了解,看起来实现是比较的干净的,抽象什么的不算复杂... 这里先来看看它的I/O线程的实现吧,顺带看看是如何实现组件的通信的.... ...

  10. spring+hibernate常见异常集合

    spring+hibernate出错小结: (1)java.lang.NoClassDefFoundError: org/hibernate/context/CurrentSessionContext ...