canvas 画图，能够选中所画的图片并且能够随意移动图片

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript" src="JS/jquery.min.js"></script>

</head>

<body>

    <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000; background-color: #CCCCCC;"></canvas>

    <input id="Button1" type="button" value="画矩形" onclick="DrawingRec()" />

    <input id="Button2" type="button" value="画线"  onclick="Drawline()"/>

    <p></p>

</body>

</html>

<script>

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    var list = [];

    var currentImag;

    var ax, ay, x, y;

    var startmove = false;

    var c = document.getElementById("myCanvas");

    c.onmousedown = function (e) {

        for (var i = 0; i < list.length; i++) {

            var w = list[i].x + list[i].width;

            var h = list[i].y + list[i].height;

            if (e.clientX < w && e.clientX > list[i].x && e.clientY < h && e.clientY > list[i].y) {

                currentImag = list[i];

                startmove = true;

                console.log("select: true");

            }

        }

    };

    c.onmousemove = function (e) {

        console.log("x:" + e.pageX + " y:" + e.pageY);

        if (currentImag == null) return;

        console.log("moveselect:true");

        x = e.clientX;

        y = e.clientY;

        //限制移动不能超出画布

        (x < 40) ? ax = 20 : ax = 480;

        (y < 40) ? ay = 20 : ay = 380;

        (x < 480 && x > 20) ? x = e.clientX : x = ax;

        (y < 380 && y > 20) ? y = e.clientY : y = ay;

        //清除之前图片然后重新绘制

        ctx.clearRect(0, 0, c.width, c.height);

        currentImag.x = x;

        currentImag.y = y;

        Piant();

        ctx.drawImage(currentImag, x - 20, y - 20, currentImag.width, currentImag.height);

    };

    c.onmouseup = function () {

        //c.onmousemove = null;

        //c.onmouseup = null;

        currentImag = null;

        startmove = false;

    };

    function Piant()

    {

        if (startmove)

        {

            for (var i = 0; i < list.length; i++)

            {

                ctx.drawImage(list[i], list[i].x - 20, list[i].y - 20, list[i].width, list[i].height);

            }

        }

    }

    function DrawingRec()

    {

        //ctx.beginPath();

        //ctx.fillStyle = "#000000";

        //ctx.fillRect(200, 100, 150, 75);

        //ctx.closePath();

        var img = new Image();

        img.src = "default/images/panel_tools.png";

        img.x = 50;

        img.y = 50;

        img.width = 40;

        img.height = 40;

        ctx.drawImage(img, 50, 50, img.width, img.height);

        list.push(img);

    }

</script>

　　

html Canvas 画图 能够选择并能移动的更多相关文章

  1. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

  2. Canvas画图在360浏览器中跑偏的问题

    问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...

  3. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  5. 使用 canvas 画图时图像文字模糊的解决办法

    最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...

  6. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  7. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  8. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  9. 毕业设计总结（1）-canvas画图

    去年6月底完成的毕业设计,到现在也才开始给它做个总结,里面有很多可以学习和借鉴的东西. 我的毕业设计的题目是“一种路径规划算法的改进与设计”,具体的要求可参见下面的表格: 题目 一种路径规划算法的改进 ...

随机推荐

  1. 服务器选型:x86 vs 小型机谁更胜一筹?

    市场上关于X86 和小型机的争论从来就没有停止过,在以往的印象当中,x86服务器在中低端形成了统治之势,而小型机则在关键性应用领域(金融.证券.政府等)享有王者地位.但是随着X86服务器的不断发展,这 ...

  2. Python Web框架——Flask

    简介 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理 ...

  3. Selenium Webdriver——去哪儿网输入实例

    1.对出发地方和到达地方进行Xpath定位,这里采用了Xpath的text() 函数进行定位 用following::sibling选择当前元素后的兄弟元素,比如出发框的Xpath表达式如下: .// ...

  4. requests接口测试——身份认证

    当调用者访问接口时需要进行用户认证(用户名密码的登录),只有通过了认证才允许调用者访问接口. 1.基本身份认证 许多要求身份认证的web服务都接受HTTP Basic Auth.这是最简单的一种身份认 ...

  5. libcurl使用心得－包括下载文件不存在处理相关（转）

    libcurl使用心得 Libcurl为一个免费开源的,客户端url传输库,支持FTP,FTPS,TFTP,HTTP,HTTPS,GOPHER,TELNET,DICT,FILE和LDAP,跨平台,支持 ...

  6. Cloudera Manger CDH 安装文档

    简介: Cloudera Manager 是 Cloudera 公司推出的 Hadoop 集群管理工具,通过该管理工具可以方便的部署.配置.监控集群. Cloudera 公司自己发布的 Hadoop ...

  7. XML解析的二种方法之dom解析

    XML解析的二种方法:dom解析和sax解析 文件大小      存储位置          读取速度 dom解析     小文件      放在内存中              快 sax解析   ...

  8. java链接数据库构建sql语句的时候容易记混的地方

    Connection conn = DBHelper.getconnection(); //封装连接数据库的工具类 String sql = "select * from t_test&qu ...

  9. sqlserver2014新特性

    1.SQL Server 2014新特性探秘(1)-内存数据库 在传统的数据库表中,由于磁盘的物理结构限制,表和索引的结构为B-Tree,这就使得该类索引在大并发的OLTP环境中显得非常乏力,虽然有很 ...

  10. jQuery绑定事件的四種方式

    这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...