<!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. Qt之多窗口切换

    在新建对象(下一页面)的时候,把自身的this指针带进去,然后把自身hide(),隐藏起来,在(下一页面中)要回退的时候只需通过: 1. parentWidget()->show(); //显示 ...

  2. URL编码与解码

    在项目中碰到了ajax传来的参数,后台接收值乱码(如下图)的问题 在此记录一下 前台: 后台: 解决问题 为什么需要编码 怎样编码 实际出现的问题解决方法 1.为什么需要编码? URL 只能使用 AS ...

  3. How to locate a path? - Unix & Linux Stack Exchange

    How to locate a path? - Unix & Linux Stack Exchange http://unix.stackexchange.com/questions/2955 ...

  4. Centos7下Rinetd安装与应用

    Linux下做地址NAT有很多种方法.比如haproxy.nginx的4层代理,linux自带的iptables等都能实现.haproxy.nginx就不说了,配置相对简单:iptables配置复杂, ...

  5. Android SQLite数据库使用

    在Android开发中SQLite起着很重要的作用,网上SQLite的教程有很多很多,不过那些教程大多数都讲得不是很全面.本人总结了一些SQLite的常用的方法,借着论坛的大赛,跟大家分享分享的.一. ...

  6. easyui datagrid 行右键生成 动态获取（toolbar） 按钮

    var createGridRowContextMenu = function(e, rowIndex, rowData) { e.preventDefault(); var grid = $(thi ...

  7. Hadoop笔记HDFS(1)

    环境:Hadoop2.7.3 1.Benchmarking HDFS 1.1测试集群的写入 运行基准测试是检测HDFS集群是否正确安装以及表现是否符合预期的好方法.DFSIO是Hadoop自带的一个基 ...

  8. Nordic Semiconductor nRF52832 蓝牙智能多协议单芯片解决方案荣获《中国电子商情》编辑选择奖

    挪威奥斯陆 – 2016年4月11日 – Nordic Semiconductor ASA (OSE: NOD) 赢得<中国电子商情>颁发的"2015年编辑选择奖",其 ...

  9. DAO

    DAO Data Access Object DAO(Data Access Object)是一个数据访问接口,数据访问:顾名思义就是与数据库打交道. 夹在业务逻辑与数据库资源中间. DAO模式是标准 ...

  10. SE78、SWM0

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...