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. MySQL Cluster(MySQL 集群) 初试（转）

    作/译者:叶金荣(imysql#imysql.com>),来源:http://imysql.com,欢迎转载. 作/译者:叶金荣(Email: ),来源:http://imysql.cn,转载请 ...

  2. C#设计模式（3）：抽象工厂模式（Abstract Factory）（转载）

    概述 在软件系统中,经常面临着“一系列相互依赖的对象”的创建工作:同时由于需求的变化,往往存在着更多系列对象的创建工作.如何应对这种变化?如何绕过常规的对象的创建方法(new),提供一种“封装机制”来 ...

  3. WPF TabControl 模拟动画

    using System; using System.Threading; using System.Windows; using System.Windows.Controls; using Wan ...

  4. jQuery插件 -- Form表单插件jquery.form.js

    http://blog.csdn.net/zzq58157383/article/details/7718956 http://my.oschina.net/i33/blog/77250

  5. Java-优秀博客推荐

    一. TCP/IP Socket 兰亭风雨的专栏: http://blog.csdn.net/ns_code 二. NIO 并发编程网-Java NIO系列教程:http://ifeve.com/ch ...

  6. asp.net记住我功能

    登录页面的记住我功能   不能用session的原因:sessionID是以cookie的形式存在浏览器端的内存中  如果用户把浏览器关闭 则sessionID就消失     但是服务器端的sessi ...

  7. C++ 迭代器 基础介绍

    C++ 迭代器 基础介绍 迭代器提供对一个容器中的对象的访问方法,并且定义了容器中对象的范围.迭代器就如同一个指针.事实上,C++的指针也是一种迭代器.但是,迭代器不仅仅是指针,因此你不能认为他们一定 ...

  8. java web dao 层和dao 实现层有什么好处

    接口是为了屏蔽不同数据库的JDBC实现差异而出现的. 以常见的系统组织结构为例,管理系统里有一个部门department表用于存放部门信息,因为部门下面可能有子部门所以表中的字段要定义成类似树形结构的 ...

  9. 你真的会用AsyncTask吗?(一)

    一个典型AsyncTask的. view source print? 01 public class DialogTestActivity extends Activity { 02     priv ...

  10. [Educational Codeforces Round 16]D. Two Arithmetic Progressions

    [Educational Codeforces Round 16]D. Two Arithmetic Progressions 试题描述 You are given two arithmetic pr ...