<!DOCTYPE html>

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

<head>

    <title></title>

</head>

<body>

    <canvas id="canvas" width="" height="" style="background-color:#ccc;"></canvas>

    <script src="../js/createjs/easeljs-NEXT.combined.js"></script>

    <script>

        var canvas = document.getElementById("canvas");

        var stage = new createjs.Stage(canvas);//创建舞台(画布)

        var shape2 = new createjs.Shape();

        ///

        shape2.graphics.beginFill("pink").beginStroke("#fff").setStrokeStyle().moveTo(, ).lineTo(canvas.width, ).lineTo(canvas.width, canvas.height * .).lineTo(, canvas.height * .).closePath();

        stage.addChild(shape2);

        stage.update();

        var img = new Image();

        img.onload = function () {

            var bmp = new createjs.Bitmap(this);

            stage.addChild(bmp);

            bmp.mask = shape2;

            stage.update();

            bmp.addEventListener("mousedown", function (e) {

                var disX = e.stageX - bmp.x;

                var disY = e.stageY - bmp.y;

                document.onmousemove = function (e) {

                    bmp.x = e.clientX - disX;

                    bmp.y = e.clientY - disY;

                    stage.update();

                };

                document.onmouseup = function (e) {

                    document.onmousemove = null;

                    document.onmouseup = null;

                };

            }, false);

        }

        img.src = "../img/10.jpg";

        ///

        var shape3 = new createjs.Shape();

        shape3.graphics.beginFill("yellow").beginStroke("#fff").setStrokeStyle().moveTo(, canvas.height * .).lineTo(canvas.width, canvas.height * .).lineTo(canvas.width,canvas.height).lineTo(,canvas.height).closePath();

        stage.addChild(shape3);

        stage.update();

        var img2 = new Image();

        img2.onload = function () {

            var bmp = new createjs.Bitmap(this);

            stage.addChild(bmp);

            bmp.mask = shape3;

            stage.update();

            bmp.addEventListener("mousedown", function (e) {

                var disX = e.stageX - bmp.x;

                var disY = e.stageY - bmp.y;

                document.onmousemove = function (e) {

                    bmp.x = e.clientX - disX;

                    bmp.y = e.clientY - disY;

                    stage.update();

                };

                document.onmouseup = function (e) {

                    document.onmousemove = null;

                    document.onmouseup = null;

                };

            }, false);

        };

        img2.src = "../img/20.jpg";

        //createjs.Ticker.addEventListener('tick', function (e) {

        //    img.x += 10;

        //    stage.update();

        //});

    </script>

</body>

</html>

createjs 利用createjs 写拼图功能的更多相关文章

  1. .NET Core的日志[5]:利用TraceSource写日志

    从微软推出第一个版本的.NET Framework的时候,就在“System.Diagnostics”命名空间中提供了Debug和Trace两个类帮助我们完成针对调试和跟踪信息的日志记录.在.NET ...

  2. 学了C语言，如何利用CURL写一个下载程序？—用nmake编译CURL并安装

    在这一系列的前一篇文章学了C语言,如何为下载狂人写一个磁盘剩余容量监控程序?中,我们为下载狂人写了一个程序来监视磁盘的剩余容量,防止下载的东西撑爆了硬盘.可是,这两天,他又抱怨他的下载程序不好用,让我 ...

  3. 利用TraceSource写日志

    利用TraceSource写日志 从微软推出第一个版本的.NET Framework的时候,就在“System.Diagnostics”命名空间中提供了Debug和Trace两个类帮助我们完成针对调试 ...

  4. 利用 AWK 的数值计算功能提升工作效率（转载）

    Awk 是一种优秀的文本样式扫描和处理工具.转文侧重介绍了 awk 在数值计算方面的运用,并通过几个实际工作中的例子,阐述了如何利用 awk 的计算功能来提高我们的工作效率.转文源自IBM Bluem ...

  5. （数据科学学习手札143）为geopandas添加gdb文件写出功能

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,很多读者朋友跟随着我先前写作的 ...

  6. 关于Quartz.NET作业调度框架的一点小小的封装，实现伪AOP写LOG功能

    Quartz.NET是一个非常强大的作业调度框架,适用于各种定时执行的业务处理等,类似于WINDOWS自带的任务计划程序,其中运用Cron表达式来实现各种定时触发条件是我认为最为惊喜的地方. Quar ...

  7. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  8. 利用多写Redis实现分布式锁原理与实现分析（转）

    利用多写Redis实现分布式锁原理与实现分析   一.关于分布式锁 关于分布式锁,可能绝大部分人都会或多或少涉及到. 我举二个例子:场景一:从前端界面发起一笔支付请求,如果前端没有做防重处理,那么可能 ...

  9. 利用redis写webshell

    redis和mongodb我之所见 最近自己在做一些个人的小创作.小项目,其中用到了mongodb和redis,最初可能对这二者没有深入的认识.都是所谓的“非关系型数据库”,有什么区别么? 实际上,在 ...

随机推荐

  1. Mysql 获取当前时间函数 （类似于sql server 中的 getDate()）

    1 获得当前日期+时间(date + time)函数:now() 2 获得当前日期+时间(date + time)函数:sysdate() sysdate() 日期时间函数跟 now() 类似,不同之 ...

  2. UVM中的class

    UVM中的类包括:基类(base)------------uvm_void/uvm_object/uvm_transaction/uvm_root/uvm_phase/uvm_port_base 报告 ...

  3. 转：SVN服务器搭建和使用（三）

    http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html 接下来,试试用TortoiseSVN修改文件,添加文件,删除文件, ...

  4. Turtlebot入门篇

    0.什么是TurtleBot? 我自己的理解就是:TurtleBot是一款移动机器人,就是主要研究让机器人自主决定应该想那个方向走,怎么绕过障碍物,最终到达目的地.与之对应还有很多机器人,比如goog ...

  5. 利用a标签特性解析地址(附加属性说明)

    首先我们看看实例 a.href = 'http://www.cnblogs.com/wayou/p/'; console.log(a.host); 控制台会输出 "www.cnblogs.c ...

  6. DDL、DML、DCL的理解

    1.DDL       1-1.DDL的概述                DDL(Data Definition Language 数据定义语言)用于操作对象和对象的属性,这种对象包括数据库本身,以 ...

  7. mysql 乱码问题

    A.mysql设置 1.service mysql stop 2.sudo vim /etc/mysql/my.cnf 在[mysqld]中添加下面两行 character_set_server = ...

  8. 如何在Macbook Pro搭建PHP开发环境

    [Apache] sudo apachectl start   // 启动Apache服务 sudo apachectl restart  // 重启Apache服务 sudo apachectl s ...

  9. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  10. JS部分代码分享

    2015-10-12 : 1.search()表达式:搜索索引 <!DOCTYPE html><html><body> <p>搜索字符串 "w ...