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. 取消chrome浏览器下input和textarea的默认样式

    最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...

  2. 6种编写HTML和CSS的最有效的方法

    感谢HTML5和CSS3,以及JavaScript,前端开发者有了大大的用武之地.大家都在用很多的工具和技术来武装自己,以加快前段的开发. 本文分享了6中最有效的方法,希望能提供你的效率,为你节约时间 ...

  3. SOA面向服务架构简述

    在上篇中我们简单谈了下架构设计中服务层的简单理解,在这里我们将继续服务层的架构,在本节我们将重点在于分布式服务.在分布式系统中表现层和业务逻辑层 并不处于同一物理部署,所以我们必须存在分布式服务,以契 ...

  4. java.lang.NoClassDefFoundError: org/hibernate/cfg/Configuration解决方法

    Autowiring of fields failed; nested exception is...........Error creating bean with name 'siteOperat ...

  5. 第三方平台正式支持接入微信公众平台JS-SDK

    之前微信公众平台面向开发者开放微信内网页开发工具包,现在第三方平台也能正式支持接入微信公众平台JS-SDK了,第三方平台可以在获得公众号的授权后,通过JS-SDK帮助公众号开发和实现网页业务. 公众号 ...

  6. Ultra-QuickSort

    Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 44489   Accepted: 16176 ...

  7. UIImagePickerController详解

    转载自:http://blog.csdn.net/kingsley_cxz/article/details/9157093 1.UIImagePickerController的静态方法: imagep ...

  8. MYSQL注入天书之HTTP头部介绍

    Background-5 HTTP头部介绍 在利用抓包工具进行抓包的时候,我们能看到很多的项,下面详细讲解每一项. HTTP头部详解 1. Accept:告诉WEB服务器自己接受什么介质类型,*/* ...

  9. 连接池 druid(阿里巴巴的框架)

      引用自:http://blog.163.com/hongwei_benbear/blog/static/1183952912013518405588/ 说的是现在最好的连接池   注: 属性跟 d ...

  10. 【SpringMVC】SpringMVC系列4之@RequestParam 映射请求参数值

    4.@RequestParam 映射请求参数值 4.1.概述     Spring MVC 通过分析处理方法的签名,将 HTTP 请求信息绑定到处理方法的相应人参中.Spring MVC 对控制器处理 ...