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. django2.0设置默认访问路由

    搭建完毕后,打开域名,直接来个报错,如果没有访问的地址,是不合适的 在urls.py中定义,默认访问的路由 from django.contrib import admin from django.u ...

  2. Python处理文本换行符

    源文件每行后面都有回车,所以用下面输出时,中间会多了一行 try: with open("F:\\hjt.txt" ) as f : for line in f: print(li ...

  3. 用WINSOCK API实现同步非阻塞方式的网络通讯

    Option Base 0Option Explicit '* ************************************************** *'*  模块名称:Winsock ...

  4. Guide to installing 3rd party JARs

    Although rarely, but sometimes you will have 3rd party JARs that you need to put in your local repos ...

  5. AnyConnect removes "Connections" tab from IE Settings solution

    I have an ASA 5510 that we use for SSL VPN Client access.  The ASA distributes the AnyConnect (v2.4. ...

  6. 《C语言基础日常笔记》

    1. 类型转换-----------------20130902 a, 浮点数(包括单精度与双精度)赋值给整型变量时,舍弃浮点数的小数部分,直接将其整数部分存放在整型变量里. b, 整型变量赋值给浮点 ...

  7. Python编程快速上手（七）Unsplash批量下载器

    首发于个人博客:http://rhinoc.top/post/python_7.html 程序描述 V1.0输入关键字搜索图片,模拟页面下拉获取更多图片,页面加载完成后获取图片链接并下载至指定文件夹. ...

  8. PHP与Imagemagick

    Imagemagick:相关站点: ImageMagick中文站:http://www.imagemagick.com.cn/ ImageMagick英文站:http://www.imagemagic ...

  9. 34-TypeError: BoxSizer.AddSpacer(): argument 1 has unexpected type 'tuple'

    TypeError: BoxSizer.AddSpacer(): argument 1 has unexpected type 'tuple'这个错误很烦,折腾了好久: 原因有二:1.因为它现在只能有 ...

  10. Java Thread系列（一）线程创建

    Java Thread系列(一)线程创建 Java 中创建线程主要有三种方式:继承 Thread.实现 Runnable 接口.使用 ExecutorService.Callable.Future 实 ...