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. ADO.Net学习总结

    一.讲述6个ADO.NET中的常用对象: Connection对象Command对象DataReader对象DataAdapter对象DataSet对象DataTable对象DataRow对象Data ...

  2. 如何解决JSP页面显示乱码问题

    一.JSP页面显示乱码 下面的显示JSP页面(display.jsp)就出现乱码: <html> <head> <title>JSP的中文处理</title& ...

  3. 获取当前函数名 __FUNCTION__ 的使用<转>

    vs项目中见过这种获取 当前函数名的调用.觉得挺方便的就记录一下. ============================================================== 转载地 ...

  4. SQLITE3 使用总结(转)

    前序: Sqlite3 的确很好用.小巧.速度快.但是因为非微软的产品,帮助文档总觉得不够.这些天再次研究它,又有一些收获,这里把我对 sqlite3 的研究列出来,以备忘记. 这里要注明,我是一个跨 ...

  5. Mysql，重复字段只取其中一行

    Mysql,重复字段只取其中一行 格式 : select 字段 from [表] where 其他字段 in (select 函数(其他字段) from [表] group by 相同字段) 示例如下 ...

  6. 文件上传：input file FileReader

    js: window.onload = function () { var input = document.getElementById('input-file'), info = document ...

  7. 在Action中操作域对象

    ----------------------siwuxie095 在 Action 中操作域对象 1.在 Action 中可以操作的域对象主要有三个: (1)Request (2)Session (3 ...

  8. [IIS] 测试的产品登陆之后有个引用外部站点js的请求半天都无法返回，导致网页一直在打转，Selenium的driver也无法对页面进行下一步的操作

    测试的产品登陆之后有个引用外部站点js的请求半天都无法返回: https://cdn.heapanalytics.com/js/heap-3497400264.js 这个js如果是在美国的机器上就可以 ...

  9. python pip 代理设置

    pip install --proxy="user:password@server:port" packagename origin url: http://xiuxixiuxi. ...

  10. Redis数据结构（五）

    存储set (1)和List类型不同的是,Set集合中不允许出现重复的元素 (2)set可包含的最大元素数量是4294967295 存储set常用命令: (1)添加/删除元素 添加 sadd myli ...