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. django-控制mysql事物

    from django.db import transaction 两种方式控制事务:为了保持数据一致性 一个Book表,一个Author表.添加一本书,也要保证添加作者.By事物控制 book = ...

  2. upstream prematurely closed connection while reading response header from upstream

    upstream prematurely closed connection while reading response header from upstream nginx配置uwsgi的时候  ...

  3. 好记性不如烂笔头--linux学习笔记9练手写个shell脚本

    #!/bin/bash #auto make install httpd #by authors baker95935 #httpd define path variable H_FILES=http ...

  4. 关于hibernate4.3版本之后org.hibernate.service.ServiceRegistryBuilder被弃用

    之前一直都是使用hibernate4.2.21的我,有一天突然没有使用本地的jar包而是让IDEA自动下载最新版本的hibernate5.2.2之后,发现有几个经常使用的方法报错了. -这真是让我惊了 ...

  5. java 重定向和转发 的区别

    重定向方式的含义是第一个页面通知浏览器发送一个新的页面请求.因为,当你使用重定向时,浏览器中所显示的URL会变成新页面的URL, 而当使用转发时,该URL会保持不变. 重定向的速度比转发慢,因为浏览器 ...

  6. jboss & eclipse 集成

    * 前提:       * 安装了 eclipse-jee-3.5.1       * 解压了 jboss5.1       * * "jboss tools" - "J ...

  7. 新手C#属性set,get的学习（部分转）2018.08.06

    public class person { public string name; } public class person { public string Name { set; get; } } ...

  8. Redis Key操作

    [Redis Key操作] 1.GETSET key value 将给定 key 的值设为 value ,并返回 key 的旧值(old value). 当 key 存在但不是字符串类型时,返回一个错 ...

  9. Prism之初识

    首先,简单地介绍说一下单一应用程序与复合应用程序. 一.单一应用程序 看看上面这张图片,假如我们当前的需求是实现主界面如图所示.如果将其构建成具有用户控件的传统 WPF 应用程序,首先应构建一个顶层窗 ...

  10. 01-E-1: 迭代与递归