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. UVa OJ 194 - Triangle (三角形)

    Time limit: 30.000 seconds限时30.000秒 Problem问题 A triangle is a basic shape of planar geometry. It con ...

  2. Mate7微信指纹支付来了 比Touch ID整合微信早一点

    之前我们聊过微信将推指纹支付 "指付通"会与Touch ID整合吗这个话题,现在有国内厂商率先支持微信指纹支付,体验一下美国用户使用Apple Pay搭配Touch ID来实现便捷 ...

  3. 我的grub.cfg配置文件

    路径:/boot/grub/grub.cfg 配置文件如下: # # DO NOT EDIT THIS FILE # # It is automatically generated by grub-m ...

  4. [Effective JavaScript 笔记]第4章：对象和原型--个人总结

    前言 对象是js中的基本数据结构.对象在js语言编码中也随处可见,比如经常会用到的函数,也是一个Function构造函数,Function.prototype原型对象.每当声明一个函数时,都会继承Fu ...

  5. myeclipse2014集成SVN

    团队合作的项目肯定少不了版本控制,那么现在就看看myeclispe中是如何使用的吧. 开发环境:myeclipse 2014   java 8 tomcate 8 试了网上说的几种方法,都没有成功,最 ...

  6. [ruby on rails] 跟我学之(2)HelloWorld

    1. 创建工程 rails new blog 2.查看下文件结构 tree 输出如下,请留意红圈中的部分. Gemfile, 用来管理应用程序的gems, 有点类似于python的包,有专门的网站来查 ...

  7. django 1.7 新特性 --- data migration

    官方文档:https://docs.djangoproject.com/en/dev/topics/migrations/ 1.7 之前大家可能会用south用于管理数据库的模型的同步.1.7之后dj ...

  8. Cannot change version of project facet Dynamic web module to 2.5

    在工程目录下有一个.settings文件夹,打开org.eclipse.wst.common.project.facet.core.xml做如下修改:<installed facet=" ...

  9. 【转】Linux中如何安装.rpm、.tar、.tar.gz和tar.bz2

    我以下面三个包为例:(三个包都在/etc/opt下)A.example-1.2.3-1.rpmB.example-1.2.3-1.tarC.example-1.2.3-1.tar.gz 1.对于rpm ...

  10. kettle与各数据库建立链接的链接字符串

    kettle与各数据库建立链接的链接字符串 Sybase: TO_DB_URL = jdbc:sybase:Tds:192.168.168.163:5000/testdb?charset=eucgb& ...