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. 让别人能登陆你的mysql

    线上的数据库肯定是不能轻易在开发新功能的时候动的,如果你的数据库跟线上不一样了又没有新数据库的备份,就很麻烦. 当然去动线上数据库,出了什么问题我是不想背锅的. 最稳健的办法!让管理线上数据库的同学, ...

  2. 将一个list分为每份小鱼1000的

    List<LazadaTrackingDataTO> dataSourceList = new ArrayList<LazadaTrackingDataTO>();       ...

  3. centos7上mysql无法启动也没有日志

    报错的原因就是 [root@localhost duanxinli]# journalctl -xe-- Subject: Unit mysqld.service has begun start-up ...

  4. Android 包信息工具类

    /** AndroidInfoUtils:安卓游戏包信息工具类**/ 1 public class AndroidInfoUtils { @SuppressWarnings("uncheck ...

  5. go_Map

    go语言中map使用哈希表,必须可以比较相等 除了slice,map,function的内建类型都可以作为key Struct类型不包括上述字段,也可作为key map中的key是无序的 packag ...

  6. Python any() 函数

    Python any() 函数  Python 内置函数 描述 any() 函数用于判断给定的可迭代参数 iterable 是否全部为 False,则返回 False,如果有一个为 True,则返回 ...

  7. 去掉redhat linux提示注册

    去掉提示注册的话,卸载几个软件包:#rpm -qa | grep subscription-manager 然后移除那出现的几项吧:#yum remove subscription-manager-g ...

  8. [Jenkins]怎样自定义发出邮件的 From Email Address 和 From Name

    在Jenkins上建了一个执行SoapUI的task,想要自定义发送邮件的地址和姓名,怎么办呢? 在Editable Email Notification里面添加Pre-send Script 脚本如 ...

  9. PHP 微信公众号开发 - 获取用户信息

    项目微信公众号开发,记录获取用户微信号信息,和用户openid 1,登录微信公众平台 点击登录微信公众平台 2,获取公众号开发信息 登陆之后在 开发->基本配置 3,设置IP白名单 在这里添加服 ...

  10. UVa 1606 Amphiphilic Carbon Molecules （扫描法+极角排序）

    题意:平面上有 n 个点,每个点不是黑的就是白的,现在要放一个隔板,把它们分成两部分,使得一侧的白点数加上另一侧的黑点数最多. 析:这个题很容易想到的就是暴力,不妨假设隔板至少经过两个点,即使不经过也 ...