<!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. 修改 window.setTimeout，使之可以传递参数和对象参数

    /* 功能:修改 window.setTimeout,使之可以传递参数和对象参数 使用方法: setTimeout(回调函数,时间,参数1,,参数n) */ var _setTimeout=setTi ...

  2. bug检测报告---礼物挑选小工具--飞天小女警

    飞天小女警----礼物挑选小工具 测试产品链接:http://123.207.159.79:8088/giving_gifts/ 发布在作者的博客里面:http://www.cnblogs.com/s ...

  3. Apple开发者账号简介

    苹果对开发者主要分为3类:个人.组织(公司.企业).教育机构.即: 1.个人(Individual) 2.组织(Organizations) 组织类又分为2个小类: (1)公司(Company) (2 ...

  4. java 字符串类型String

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

  5. Flowplayer-Skin

    SOURCE URL: https://flowplayer.org/docs/skinning.html Skinning with CSS3 Flowplayer skin design is C ...

  6. Android 自动化测试 Emmagee

    Emmagee 是一个性能测试小工具 用来监控指定被测应用在使用过程中占用机器的CPU, 内存,流量资源的性能小工具 阅读目录 Emmagee 介绍 Emmagee是网易杭州研究院QA团队开发的一个简 ...

  7. NavBarControl

    https://documentation.devexpress.com/#WindowsForms/clsDevExpressXtraNavBarNavBarControltopic Views h ...

  8. [HIHO1079]离散化（线段树、染色）

    题目链接:http://hihocoder.com/problemset/problem/1079 MD坑爹,线段查询的时候左闭右开.插完挨个点找一遍扔set里,注意没染色的情况. #include ...

  9. HMI开发与控件

    =>控件是什么概念? 百度曰,控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者. 对于HMI开发来说,使用控件可以快速获取到用户的交互(包括按下.释放.点击.拖动 ...

  10. MultiProvider

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