<!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. 微软 .net 你更新这么快IDE vs2015 、语法糖 6.0、framework、‘吹得这么牛，然并用

    好久没写吐槽文章了,因为无尽的加班,也因为工作的变迁,又因为最近看了微软又尼玛发布什么什么,好受不了. 今年大专毕业第八个年头了,人也到了30,真是光阴荏苒啊.最近这一两年发生了很多事,让我自己倍受打 ...

  2. GWT入门学习之下载安装

    1.准备 安装 jdk: 下载路径:http://download.oracle.com/otn-pub/java/jdk/8u92-b14/jdk-8u92-windows-i586.exe?Aut ...

  3. Myeclipse8.5 最新注册码以使用方法（可以用到2015年！！！）

    已破解的一组,复制即可!(注册码到2015年哦!) name:LIKEcode:YLR8ZC-855550-6067725176540043 使用方法:把注册码贴到Window-->prefer ...

  4. asp.net 验证正则表达式

    基本元字符: . 任意的一个非换行字符 [] 集合匹配,匹配一个[]中出现的字符. 是在多个字符中取一个. () 调整优先级的作用. 还有一个分组的作用 | 或的意思,测试|一下. 注意,或的优先级最 ...

  5. Linux之 sort,uniq,cut,wc命令详解

    sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...

  6. print函数

    python中print既可以写成print a,也可以写成print(a) >>> a=1 >>> print a 1 >>> print(a) ...

  7. 【Java】聊聊常用的非对称加密算法之一RSA的使用（Java）

    参考的优秀文章 Java加密技术(四)——非对称加密算法RSA RSA算法原理(一).RSA算法原理(二) RSA的公钥和私钥到底哪个才是用来加密和哪个用来解密? 简单的介绍 RSA是有名的非对称加密 ...

  8. new一个数组，delete释放内存

    int *a = new int[4]; for(int i=0;i<4;i++) { a[i] = i; printf("a[%d]=%d\n", i, i); } del ...

  9. 【Android】设置 LinearLayout 的样式

    前言 LinearLayout是最常用的控件之一,主要是用来进行排版布局,本人介绍如何给LinearLayout 增加边框样式,在增加样式之前的效果如下: 可以看得出来,每个LinearLayout几 ...

  10. ReactiveCocoa(RAC)

    好处:代码高聚合,方便我们管理: 链式编程: CaculatorMaker.h #import <Foundation/Foundation.h> #define ADD #define ...