<!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. this 的工作原理

    JavaScript 有一套完全不同于其它语言的对 this 的处理机制. 在五种不同的情况下 ,this 指向的各不相同. 全局范围内 this; 当在全部范围内使用 this,它将会指向全局对象. ...

  2. js弹出对话框的方法总结

    九种js弹出对话框的方法总结,需要的朋友可以参考一下 [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE=" ...

  3. c#委托、事件、Observer

    委托和事件在.NET Framework[1] 中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易. 中文名 委托 外文名 Delegate 编程语言 C# 作     ...

  4. cnblogs 主题 summerGarden redesign

    Intro cnblogs 的 summerGarden 主题是一个宽屏版的,而且设计虽然很Qzone风格,不过我个人喜欢「简单,扁平」的设计风格,所以就修改了一下样式. before after r ...

  5. java 字符串类型String

    在本质上,字符串实际上一个char类型的数组,由java.lang.String类来表示,该类具有一系列的属性和方法,提供对字符串的一些操作.除此之外,java还提供了StringBuffer类来处理 ...

  6. [课程设计]Scrum 2.3 多鱼点餐系统开发进度 （订单一览设计）

    Scrum 2.3 多鱼点餐系统开发进度  (订单一览设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统 ...

  7. Hibernate框架的使用。。。

    在lib文件夹里面导入Hibernate开发的架包和连接mysql,连接数据源c3p0的架包... 在src目录下建立Hibernate Configuration  File(cfg.xml)的配置 ...

  8. 2x2矩阵相乘模版

    由于Unity只有4x4矩阵,今天要做一个2x2矩阵的旋转,居然忘了顺序.故写下作为模版记录. 顺序: 下面是使用其进行旋转的C#代码: public struct Position { public ...

  9. SerialChat与Arduino的配合使用

    最近在开发过程中,用到了Arduino开发板以及其IDE:Arduino,这个IDE使用起来很方便,编码也很简单,但有一点美中不足的是Arduino只能输出数值,不能绘图,所以就用到了另外一款串口调试 ...

  10. sqlite创建表

    create table bike (id ) primary key, password ));