实例 1 : 文字模糊

实例 2 : 图片模糊

实例 3 : 渐变和容器

实例 4 : 创建蒙板

实例 5 : 蒙板

实例 6 : 图片帧

实例 7 : 文字帧

实例 8 : Tick 时间控制

实例 9 : updateCache讲解

实例 10 : updateCache动画

实例 11 : 月亮

实例 12 : 飘动的心

实例 13 : 下雨

实例 14 : 画板

实例 15 : HTML节点

实例 16 : 双击事件

实例 17 : rollover mouseover区别

实例 18 : 拖拽花

实例 19 : 拖拽区域

实例 20 : 捕获事件

实例 20 : mouseChildren

** 所有代码需要在onload以后运行 // createJs 实例一 绘制图形_________________________________________________________________________ // 创建画布 var stage = new createjs.Stage('demoCanvas'); // Graphics : 矢量绘图接口 var node = new createjs.Graphics().beginStroke('#F00').moveTo(5, 35).lineTo(110, 75).endStroke(); // 创建一个图形显示对象 // 把绘制好的图形插入到对象内 var shape = new createjs.Shape(node); // 设置坐标 shape.x = 50; shape.y = 50; // 把显示对象插入画布 stage.addChild(shape); // 创建一个显示图形的对象 circle = new createjs.Shape(); // graphics : 图形绘制接口 circle.graphics.beginStroke('#F00').moveTo(105, 35).lineTo(110, 75); // 坐标 circle.x = circle.y = 50; // 图形对象插入到画布 stage.addChild(circle); // 显示 stage.update(); // createJs 实例二 绘制图形_________________________________________________________________________ var elImg = $('img')[0]; var append = function (arg){ var i=0; while(i++){ if(arg[i]){ stage.addChild( new createjs.Shape(arg[i]) ); } } }; var Graphics = createjs.Graphics; // 两种方式创建矢量图形 // 创建画布 var stage = new createjs.Stage('demoCanvas'); // Graphics : 矢量绘图接口 // rect(x, y, width, height) : 创建矩形 var rect = new Graphics().beginFill("blue").rect(5, 5, 80, 80); // 绘制线 var line = new Graphics().beginStroke('#F00').moveTo(5, 35).lineTo(110, 75).lineTo(110, 175).endStroke(); // drawRoundRect(x, y, width, height, box-build) : 创建圆角矩形 var build = new Graphics().beginFill("blue").drawRoundRect(150, 150, 120, 120, 5); // beginLinearGradientFill([color1, color2], [0, 1], x0, y0, x1, y1) : 填充制渐变效果 // [color1, color2] : 填充渐变的颜色 只能有2个颜色 // [0, 1] : 比率 类似CSS3的linear-granient里的5% 百分之几 // x0, y0, x1, y1 : 渐变的方向 注意该渐变坐标点是以canvas的0,0点开始的 var linear = new Graphics().beginLinearGradientFill(['#00f', "red"], [0, 1], 150, 0, 250, 150).drawRoundRect(150, 0, 120, 120, 5); // drawCircle(x, y, 半径) : 绘制圆形 var circle = new Graphics().beginFill("#F90").drawCircle(140, 140, 40); // beginRadialGradientFill([color1, color2], [0, 1], x0, y0, r0, x1, y1, r1) : 创建径向渐变 // [color1, color2] : 填充渐变的颜色 只能有2个颜色 var gradient = new Graphics().beginRadialGradientFill(["#f60", "#00F"], [0, 1], 310, 140, 0, 330, 140, 60).drawCircle(330, 140, 40); // drawEllipse(x, y, width, height) : 椭圆 var ellipse = new Graphics().beginFill("blue").drawEllipse(400, 105, 40, 120); // beginBitmapStroke(图像对象, [repeat | repeat-x | repeat-y | no-repeat]) : 用图像填充填充边 // setStrokeStyle(width) : 设置边的宽度 var imgA = new Graphics().setStrokeStyle(100).beginStroke("#999").beginFill("blue").beginBitmapStroke(elImg).rect(300, 300, 1, 1); // beginBitmapFill(图像对象, [repeat | repeat-x | repeat-y | no-repeat]) : 用图像填充图形 var imgB = new Graphics().beginStroke("red").beginBitmapFill(elImg).drawCircle(550, 100, 100); // 创建一个图形显示对象 // 把绘制好的图形插入到对象内 append([rect, line, build, linear, circle, gradient, ellipse, imgA, imgB]); // 显示 stage.update(); // createJs 实例三 图形的位置 _________________________________________________________________________ // 创建画布 var stage = new createjs.Stage('demoCanvas'); // beginBitmapFill(图像对象) : 填充图形 // drawCircle(430, 430, 100) : 430, 430 确定截取图片的位置 // 该圆的位置后期可以由x, y进行调整 var imgCircle = new createjs.Graphics().beginBitmapFill($('img')[0]).drawCircle(430, 430, 100); // 创建一个图形显示对象 // 把绘制好的图形插入到对象内 var shape = new createjs.Shape(imgCircle); // imgCircle的位置由绘图的位置 + shape.x|y的位置 shape.x = -400; shape.y = -400; stage.addChild(shape); // 显示 stage.update(); // createJs 字体 图形的位置 _________________________________________________________________________ var Graphics = createjs.Graphics; // 两种方式创建矢量图形 // 创建画布 var stage = new createjs.Stage('demoCanvas'); // new createjs.Text(创建的文字, 是否加粗&&字体大小&&字体, 颜色) : 创建文本对象 var txt = new createjs.Text("Hello CreateJS!", "bold 24px Arial", "blue"); // 文字宽度 txt.lineWidth = 250; // 字体的位置 txt.y = 100; // 字体对齐方式 默认top txt.textBaseline = 'top'; // 文本插入画布 stage.addChild(txt); // 显示 stage.update(); // createJs 帧动画一 _________________________________________________________________________ // 创建画布 var stage = new createjs.Stage('demoCanvas'); // spriteSheet(图像, 动画, 帧尺寸) : 设置帧和动画 var ss = new createjs.SpriteSheet({ /** * animations : 设定帧动画效果 参数可自己定义 并可以定义无数个参数 注意一定要是可循环的帧动画 先执行哪个由new Sprite的 第2个参数决定 * run : [开始帧, 结束帧, next, 帧频] 开始执行的第一个数组帧集合 开始帧 结束帧 next必填 * jump : [开始帧, 结束帧, next, 帧频] 开始执行的第二个数组帧集合 开始帧 结束帧 next必填 * end : [开始帧, 结束帧, next, 帧频] 开始执行的第三个数组帧集合 开始帧 结束帧 next必填 */ "animations": { run : [0, 25, 'jump', 2], jump : [26, 51, 'end'], end : [50, 63, 'run'] }, // 定义图像 "images": ["spritesheet_grant.png"], /** * frames : {width, height, count, regX, regY} 定义框架 * regX regY : 相对原始的偏移位置 * width height : 框架的宽高 * count : 帧数(多少帧后重复) */ "frames": { "regX": 0, "regY": 0, "height": 293, "width": 166, "count": 64 } }); // Sprite(SpriteSheet, 开始执行的第一帧名字) : 创建一个精灵 var sprite = new createjs.Sprite(ss, "run"); // scaleY : 动画Y方向缩放比例 // scaleX : 动画X方向缩放比例 sprite.scaleY = 0.6; sprite.scaleX = 0.6; // 精灵插入到画布 stage.addChild(sprite); // Ticker : 定时器 // setFPS : 设置每一秒的帧数 // getFPS : 获得帧数 createjs.Ticker.addEventListener("tick", function (){ // 运行画布 stage.update(); }); // 运行画布的另一种方法 // createjs.Ticker.addEventListener("tick", stage); // 创建画布 var stage = new createjs.Stage('demoCanvas'); // spriteSheet(图像, 动画, 帧尺寸) : 设置帧和动画 var ss = new createjs.SpriteSheet({ /** * animations : 设定帧动画效果 参数可自己定义 并可以定义无数个参数 注意一定要是可循环的帧动画 先执行哪个由new Sprite的 第2个参数决定 * 非连续的帧动画使用 { farems : [帧], next : 跳转到下一个帧定义 speed : 帧频率 } */ "animations": { run : { frames : [1,2,3,4,5,5,5,5,5], next : 'jump', speed : 4 }, jump : { frames : [8,9,10,11,12,13,13,13,13,14], next : 'end', speed : 2 }, end : [50, 63, 'run'] }, // 定义图像 "images": ["spritesheet_grant.png"], /** * frames : {width, height, count, regX, regY, } 定义框架 * regX regY : 相对原始的偏移位置 * width height : 框架的宽高 * count : 帧数(多少帧后重复) 这个数要大于animations里定义的总帧数 */ "frames": { "regX": 0, "regY": 0, "height": 293, "width": 166, "count": 64 } }); // Sprite(SpriteSheet, 开始执行的第一帧名字) : 创建一个精灵 var sprite = new createjs.Sprite(ss, "run"); // scaleY : 动画Y方向缩放比例 // scaleX : 动画X方向缩放比例 sprite.scaleY = 0.6; sprite.scaleX = 0.6; // 精灵插入到画布 stage.addChild(sprite); // Ticker : 定时器 // setFPS : 设置每一秒的帧数 // getFPS : 获得帧数 createjs.Ticker.addEventListener("tick", function (){ // 运行画布 stage.update(); }); // 运行画布的另一种方法 // createjs.Ticker.addEventListener("tick", stage); // 混合单帧模式 + 范围模式 var data = { "animations": { a : { frames : [1,10], next : 'b', speed : 1 }, b : [11, 22, 'c', 1], c : [23, 64, 'a', 2] }, "images": ["spritesheet_grant.png"], // 截取的帧 "frames": { "regX": 0, "regY": 0, "height": 293, "width": 166, "count": 64 } }; // 创建画布 var stage = new createjs.Stage('demoCanvas'); // SpriteSheet : 封装与精灵表相关的属性和方法 var ss = new createjs.SpriteSheet(data); // 创建精灵 var sprite = new createjs.Sprite(ss, "a"); stage.addChild(sprite); createjs.Ticker.addEventListener("tick", function (){ // 运行画布 stage.update(); }); // createJs 模糊图片 _________________________________________________________________________ // 创建一个画布 var stage = new createjs.Stage('demoCanvas'); // 获得图片 var img = $('img')[0]; // BlurFilter(x轴模糊度, y轴模糊度, 质量) : 创建一个模糊对象 // 质量越大 越模糊 var blurFilter = new createjs.BlurFilter(10, 0, 5); // 获得创建的模糊对象的信息 {x, y, width, height} var margins = blurFilter.getBounds(); // Bitmap : 加载图片 var image = new createjs.Bitmap(img); // filters = [] 设置图片的模糊度为创建的模糊对象 image.filters = [blurFilter]; // cache(x, y, width, height) : 创建模糊图像 // 这里用原图像 + 模糊数据的距离 // x, y : 模糊图像的位置 // width, height : 图像的宽高 image.cache(margins.x, margins.y, img.width + margins.width, img.height + margins.height); // 设置原图像的位置 image.x += image.x + image.width; // 插入画布 stage.addChild(image); // 显示 stage.update(); // createJs 修改图片色相 饱和度 _________________________________________________________________________ var stage = new createjs.Stage('demoCanvas'); var img = $('img')[0]; // ColorMatrix(亮度, 对比度, 饱和度, 色调) : 创建颜色对象 // adjustHue(-180 & 180) : 调整像素的色相 // adjustSaturation(-100 & 100) : 调整像素的饱和度 越小颜色越淡 var greyScaleFilter = new createjs.ColorMatrix().adjustHue(0).adjustSaturation(-130); // 加载图像 var image = new createjs.Bitmap(img); // ColorMatrixFilter(greyScaleFilter) : 根据颜色对象创建实例 // 赋值给图片的filters属性 image.filters = [new createjs.ColorMatrixFilter(greyScaleFilter)]; // cache(x, y, width, height) : 应用到图像上 image.cache(0, 0, img.width, img.height); stage.addChild(image); stage.update(); // createJs 添加click事件 _________________________________________________________________________ // 创建画布 var stage = new createjs.Stage('demoCanvas'); // 创建图形显示对象 var sprite = new createjs.Shape(); // 创建矩形 圆形 sprite.graphics.beginFill("blue").drawCircle(30, 30, 20).drawRect(50, 50, 25, 25); // 绑定事件 sprite.addEventListener("click", function (event){ console.log('click'); }); stage.addChild(sprite); stage.update(); // createJs ColorFilter修改RGBA _________________________________________________________________________ var img = $('img')[0]; // 创建画布 var stage = new createjs.Stage('demoCanvas'); // ColorFilter(r, g, b, a) : 修改R G B A颜色值 var removeRedFilter = new createjs.ColorFilter(0, 3, 3, 1); // 创建图片对象 var image = new createjs.Bitmap(img); // 设置图片filters为创建的颜色对象 image.filters = [removeRedFilter]; // cache(x, y, width, height) : 显示图像 image.cache(0, 0, img.width, img.height); stage.addChild(image); stage.update(); // createJs BitmapText 使用精灵表中定义位图字形显示文本 _________________________________________________________________________ var data = { "animations": { "V": {"frames": [20]}, "A": {"frames": [0]}, ",": {"frames": [26]}, "W": {"frames": [22]}, "B": {"frames": [1]}, "X": {"frames": [23]}, "C": {"frames": [2]}, ".": {"frames": [29]}, "Y": {"frames": [24]}, "D": {"frames": [3]}, "Z": {"frames": [25]}, "E": {"frames": [4]}, "F": {"frames": [5]}, "G": {"frames": [6]}, "H": {"frames": [7]}, "I": {"frames": [8]}, "J": {"frames": [9]}, "K": {"frames": [10]}, "!": {"frames": [27]}, "L": {"frames": [11]}, "M": {"frames": [12]}, "N": {"frames": [13]}, "O": {"frames": [14]}, "P": {"frames": [15]}, "Q": {"frames": [16]}, "R": {"frames": [17]}, "S": {"frames": [18]}, "T": {"frames": [19]}, "?": {"frames": [28]}, "U": {"frames": [20]} }, "images": ["spritesheet_font.png"], "frames": [ [155, 2, 25, 41, 0, -10, -3], [72, 2, 28, 43, 0, -8, -1], [599, 2, 28, 38, 0, -8, -4], [41, 2, 27, 44, 0, -8, -1], [728, 2, 32, 38, 0, -6, -4], [184, 2, 35, 41, 0, -4, -2], [409, 2, 30, 39, 0, -7, -3], [443, 2, 29, 39, 0, -7, -3], [901, 2, 13, 35, 0, -8, -5], [698, 2, 26, 38, 0, -9, -4], [666, 2, 28, 38, 0, -8, -4], [764, 2, 23, 38, 0, -10, -4], [828, 2, 37, 36, 0, -3, -5], [567, 2, 28, 38, 0, -8, -4], [519, 2, 44, 38, 0, 1, -4], [869, 2, 28, 36, 0, -8, -5], [476, 2, 39, 38, 0, -2, -4], [371, 2, 34, 39, 0, -5, -3], [631, 2, 31, 38, 0, -6, -4], [289, 2, 39, 40, 0, -2, -3], [918, 2, 31, 32, 0, -6, -7], [791, 2, 33, 37, 0, -5, -4], [2, 2, 35, 46, 0, -4, 1], [253, 2, 32, 40, 0, -6, -3], [104, 2, 32, 43, 0, -6, -1], [332, 2, 35, 39, 0, -5, -4], [953, 2, 9, 16, 0, -17, -29], [140, 2, 11, 41, 0, -16, -1], [223, 2, 26, 41, 0, -7, -1], [966, 2, 9, 10, 0, -17, -31] ] }; // 创建画布 var stage = new createjs.Stage('demoCanvas'); // SpriteSheet : 封装与精灵表相关的属性和方法 var ss = new createjs.SpriteSheet(data); // BitmapText(文本, 封装好的精灵帧动画) : 使用精灵表中定义位图字形显示文本 // 这里必须使用单帧模式 var text = new createjs.BitmapText("V", ss); stage.addChild(text); stage.update(); // createJs Container 创建容器Layer _________________________________________________________________________ var stage = new createjs.Stage('demoCanvas'); // Container(图形1, 图形2...) : 创建一个容器Layer var container = new createjs.Container(); var rect = new createjs.Graphics().beginFill("#F90").drawRect(250, 250, 100, 100); var target = new createjs.Shape(rect); var txt = new createjs.Text("Double Click Me!", "36px Arial", "#000"); txt.textBaseline = "top"; // 插入文本 矩形 container.addChild(txt, target); stage.addChild(container); // dblclick : 双击事件 container.on("dblclick", function (evt) { console.log(evt); }); stage.update(); var stage = new createjs.Stage('demoCanvas'); // Container(图形1, 图形2...) : 创建一个容器Layer var container = new createjs.Container(); var rect = new createjs.Graphics().beginFill("#F90").drawRect(250, 250, 100, 100); var target = new createjs.Shape(rect); var txt = new createjs.Text("Double Click Me!", "36px Arial", "#000"); txt.textBaseline = "top"; // 插入文本 矩形 container.addChild(txt, target); stage.addChild(container); // dblclick : 双击事件 container.on("click", function (e) { console.log(e); console.log('我只能点击一次'); // removeChild(绑定事件的元素) : 删除绑定的事件 // 因为使用的是container 所以这里使用的是e.target.parent获得container元素 stage.removeChild(e.target.parent); }); stage.update(); // createJs enableMouseOver alpha _________________________________________________________________________ var stage = new createjs.Stage('demoCanvas'); var circle = new createjs.Shape(); circle.graphics.beginFill('#0000FF').drawRoundRect(0, 0, 200, 200, 20); circle.x = stage.canvas.width / 2; circle.y = stage.canvas.height / 2; circle.name = 'Blue Circle'; // enableMouseOver(number) : 控制鼠标的出发频率和cursor // number 范围是0-50 值越大触发速度越快 相反触发速度越小 stage.enableMouseOver(10); // cursor : 手型 circle.cursor = 'pointer'; circle.addEventListener("click", function (e) { // alpha : 设置透明度 0-1 // 如果是在事件里修改的透明度 需要重新调用一次update circle.alpha = 0.5; stage.update(); }); // mouseover : 划过事件 circle.addEventListener('mouseover', function (){ // enableMouseOver的值越大 划过触发的速度越快 console.log('mouseover'); }); circle.addEventListener('mouseout', function (){ // enableMouseOver的值越大 划过触发的速度越快 console.log('mouseout'); }); stage.addChild(circle); stage.update(); // createJs 拖拽 _________________________________________________________________________ var stage = new createjs.Stage('demoCanvas'); var circle = new createjs.Shape(); circle.graphics.beginFill('#0000FF').drawRoundRect(0, 0, 200, 200, 20); circle.x = stage.canvas.width / 2; circle.y = stage.canvas.height / 2; circle.name = 'Blue Circle'; // mousedown : 鼠标按下事件 circle.addEventListener('mousedown',function(e){ // stagemousemove : stage专有方法 move事件 stage.addEventListener('stagemousemove',function(e){ // stage.mouseX : 鼠标移动的当前X位置 // stage.mouseY : 鼠标移动的当前Y位置 circle.x = stage.mouseX; circle.y = stage.mouseY; // 重新渲染 stage.update(); }); // stagemouseup : stage专有方法 鼠标抬起事件 stage.addEventListener('stagemouseup',function(e){ // removeAllEventListeners : 删除注册了事件的节点的所有事件 e.target.removeAllEventListeners(); }); }); stage.addChild(circle); stage.update(); // createJs 计时器方法 _________________________________________________________________________ /** * createjs.Ticker.tick(fn, time) : 计时器方法 * fn : 运行函数 * time : 间隔运行时间 毫秒数 */ createjs.Ticker.tick = function (fn, time){ var t = 0; var isTrue = true; createjs.Ticker.addEventListener("tick", tick); function tick(e){ // 如果时间差大于等于time 执行fn if(e.time - t >= time){ console.log(1); fn(); isTrue = true; } if(isTrue){ // 重新赋值新时间 t = e.time; isTrue = false; } }; }; // createJs 图片模糊 _________________________________________________________________________ var init = function (){ var elImg = $(''); elImg.on('load', function (){ handleComplete(stage, elImg); }); elImg.attr('src', '../a1.jpg'); // 创建画布 var stage = new createjs.Stage("demoCanvas"); }; var handleComplete = function (stage, elImg, text){ // 加载图片对象 var blur = new createjs.Bitmap(elImg[0]); // 因为图片没有插入DOM 所以这里使用canvas获得图片的宽高 也可以用width height属性 // getBounds() : 获取图片对象的属性 {x, y, width, height} var textInfo = blur.getBounds(); // 设置canvas的宽 高 $('#demoCanvas')[0].width = 800; $('#demoCanvas')[0].height = 600; // BlurFilter(x轴模糊度, y轴模糊度, 质量) : 创建模糊对象 // ColorMatrix(亮度, 对比度, 饱和度, 色调) : 创建颜色对象 // ColorMatrixFilter(new createJs.ColorMatrix) : 根据颜色对象创建实例 blur.filters = [new createjs.BlurFilter(50, 0, 1)]; // cache(x, y, width, height) : 创建模糊对象在画布上的应用范围 blur.cache(0, 0, textInfo.width, textInfo.height); console.log(textInfo.width, textInfo.height); stage.addChild(blur); stage.update(); }; // createJs 文字模糊 _________________________________________________________________________ var init = function (){ // 创建画布 var stage = new createjs.Stage("demoCanvas"); // 创建文本 var text = new createjs.Text("我的 天空", "30px Microsoft Yahei", "#FFFFFF"); /** * set() : 字体的属性 * x, y : 字体位置 * lineWidth : 字体宽度 每组单词是一个整体 * textBaseline : 字体上下对齐方式 * textAlign : 字体左右对齐方式 */ text.set({ x : 50, y : 50, textAlign : 'left', text : '我的 天空', // 该文本由空格分成了2个单词 这里设置宽度为10 所以会产生换行 lineWidth : 10 }); /** * BlurFilter(x轴模糊度, y轴模糊度, 质量) : 模糊对象 质量越大 越模糊 * ColorMatrix(亮度, 对比度, 饱和度, 色调) : 颜色对象 * ColorMatrixFilter(new createjs.ColorMatrix) : 根据颜色对象创建实例 */ text.filters = [new createjs.BlurFilter(10, 5, 1), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(60))]; // getBounds() : 获取对象的属性 {x, y, width, height} var textInfo = text.getBounds(); // 插入文本到画布 stage.addChild(text); // cache(x, y, width, height) : 应用模糊对象的文字在画布上的显示范围 text.cache(0, 0, textInfo.width, textInfo.height); // 显示 stage.update(); }; // createJs 创建蒙板 _________________________________________________________________________ var alphaMaskFilter = function (){ var stage = new createjs.Stage('demoCanvas'); var circle = new createjs.Shape(); var img = document.createElement('img'); circle.graphics.beginFill("#F90").drawCircle(140, 140, 80); // 设置圆形蒙板在画布上的活动范围是整个画布 circle.cache(0, 0, 500, 400); img.onload = function (){ var maskFilter; // 加载图片对象 bitmap = new createjs.Bitmap(img); stage.addChild(bitmap); // 根据圆形创建创建蒙板 maskFilter = new createjs.AlphaMaskFilter(circle.cacheCanvas); // 应用蒙板 bitmap.filters = [maskFilter]; // 设置图片在画布上应用蒙板的范围是整个画布 bitmap.cache(0, 0, 500, 400); stage.update(); } img.src = '../a2.jpg'; }; alphaMaskFilter(); // createJs 图片文字帧动画 _________________________________________________________________________ var stage, text; var init = function (){ stage = new createjs.Stage("demoCanvas"); var img = new Image(); img.addEventListener('load', function (){ // SpriteSheet : 封装与精灵相关的属性和方法 var ss = new createjs.SpriteSheet(data); // BitmapText(文本, 封装好的精灵帧动画) : 使用精灵表中定义位图字形显示文本 var text = new createjs.BitmapText("xiaohua\nhenaixiaolan", ss); // getBounds() : 获取文本对象的数据{x, y, width, height} var bounds = text.getBounds(); // 设置文字的位置 text.x = stage.canvas.width - bounds.width >> 1; text.y = stage.canvas.height - bounds.height >> 1; stage.addChild(text); stage.update(); }); img.src = '../spritesheet_font.png'; var data = { /** * animations : 根据定义好的frames帧定义帧动画 frames : 具体引用哪一帧动画 next : 下一帧 speed : 帧频 */ animations : { 'V' : {frames : [21, 0]}, 'A' : {frames : [0]}, ':' : {frames : [26]}, 'W' : {frames : [22]}, 'B' : {frames : [1]}, 'X' : {frames : [23]}, 'C' : {frames : [2]}, '.' : {frames : [29]}, 'Y' : {frames : [24]}, 'D' : {frames : [3]}, 'Z' : {frames : [25]}, 'E' : {frames : [4]}, 'F' : {frames : [5]}, 'G' : {frames : [6]}, 'H' : {frames : [7]}, 'I' : {frames : [8]}, 'J' : {frames : [9]}, 'K' : {frames : [10]}, '!' : {frames : [27]}, 'L' : {frames : [11]}, 'M' : {frames : [12]}, 'N' : {frames : [13]}, 'O' : {frames : [14]}, 'P' : {frames : [15]}, 'Q' : {frames : [16]}, 'R' : {frames : [17]}, 'S' : {frames : [18]}, 'T' : {frames : [19]}, '?' : {frames : [28]}, 'U' : {frames : [20]} }, // 引用的图片 images : ['../spritesheet_font.png'], /** * 设置帧图片的位置 大小 偏移量 * frames : [ [x, y, width, height, imageIndex, regX, regY] ] */ frames : [ [155, 2, 25, 41, 0, -10, -3], [72, 2, 28, 43, 0, -8, -1], [599, 2, 28, 38, 0, -8, -4], [41, 2, 27, 44, 0, -8, -1], [728, 2, 32, 38, 0, -6, -4], [184, 2, 35, 41, 0, -4, -2], [409, 2, 30, 39, 0, -7, -3], [443, 2, 29, 39, 0, -7, -3], [901, 2, 13, 35, 0, -8, -5], [698, 2, 26, 38, 0, -9, -4], [666, 2, 28, 38, 0, -8, -4], [764, 2, 23, 38, 0, -10, -4], [828, 2, 37, 36, 0, -3, -5], [567, 2, 28, 38, 0, -8, -4], [519, 2, 44, 38, 0, 1, -4], [869, 2, 28, 36, 0, -8, -5], [476, 2, 39, 38, 0, -2, -4], [371, 2, 34, 39, 0, -5, -3], [631, 2, 31, 38, 0, -6, -4], [289, 2, 39, 40, 0, -2, -3], [918, 2, 31, 32, 0, -6, -7], [791, 2, 33, 37, 0, -5, -4], [2, 2, 35, 46, 0, -4, 1], [253, 2, 32, 40, 0, -6, -3], [104, 2, 32, 43, 0, -6, -1], [332, 2, 35, 39, 0, -5, -4], [953, 2, 9, 16, 0, -17, -29], [140, 2, 11, 41, 0, -16, -1], [223, 2, 26, 41, 0, -7, -1], [966, 2, 9, 10, 0, -17, -31] ] }; }; // createJs 渐变和Layer _________________________________________________________________________ // 创建画布 var stage = new createjs.Stage('demoCanvas'); // 创建一个Layer 容器 // 容器内的对象是以该容器的左上角为0, 0点 var container = new createjs.Container(); /** * beginLinearGradientFill([color1, ..., colorN], [0, 0.N, ..., 1], x0, y0, x1, y1) : 填充制渐变效果 [color1, color2, ..., colorN] : 填充渐变的颜色 只能有2个颜色 [0, 0.N, ..., 1] : 比率 类似CSS3的linear-granient里的5% 百分之几 x0, y0, x1, y1 : 渐变的方向 注意该渐变坐标点是以canvas的0,0点开始的 */ var sky = new createjs.Shape(); sky.graphics.beginLinearGradientFill(["#FFF", "#09f", '#F60'], [0, 0.5, 1], 0, 0, 300, 150); sky.graphics.drawRect(0, 0, 300, 150); container.x = 100; container.y = 50; container.addChild(sky); stage.addChild(container); // 显示 stage.update(); // createJs 帧动画 _________________________________________________________________________ // 创建画布 var stage = new createjs.Stage('demoCanvas'); var isTrue = true; // 创建一个容器 var box1 = new createjs.Container(); var box2 = new createjs.Container(); // 创建文本按钮 var goPlay = new createjs.Text('跳到第3帧播放', 'bold 18px Microsoft Yahei', '#0099FF'); var goStop = new createjs.Text('跳到第55帧停止', 'bold 18px Microsoft Yahei', '#0099FF'); var play = new createjs.Text('播放', 'bold 18px Microsoft Yahei', '#0099FF'); var stop = new createjs.Text('暂停', 'bold 18px Microsoft Yahei', '#0099FF'); // 设置手型 stage.enableMouseOver(10); box1.cursor = 'pointer'; box2.cursor = 'pointer'; // 设置文字的文字 play.x = 150; stop.x = 150; // 设置容器的位置 box1.set({ x : 50, y : 300 }); box2.set({ x : 300, y : 300 }); box1.addChild(goPlay, play); box2.addChild(goStop, stop); // 点击停止 stop.addEventListener('click', function (){ sprite.stop(); }); // 点击播放 play.addEventListener('click', function (){ sprite.play(); }); // 点击跳转到第50帧停止 goStop.addEventListener('click', function (){ sprite.gotoAndStop(50); }); // 点击跳转到第3帧播放 goPlay.addEventListener('click', function (){ sprite.gotoAndPlay(3); }); // spriteSheet(图像, 动画, 帧尺寸) : 设置帧和动画 var ss = new createjs.SpriteSheet({ // 帧动画使用的图片 images : ['../spritesheet_grant.png'], /** * animations : 设定帧动画效果 参数可自己定义 并可以定义无数个参数 注意一定要是可循环的帧动画 先执行哪个由new Sprite的 第2个参数决定 * 参数A(开始帧, 结束帧, 下一帧, 帧频) : 需要执行的一组帧动画 下一帧必填 * 参数B(开始帧, 结束帧, 下一帧, 帧频) : 需要执行的一组帧动画 * ... * 参数X(开始帧, 结束帧, 下一帧, 帧频) : 需要执行的一组帧动画 */ animations : { // 一组帧动画 run : [0, 25, 'jump', 2], // 一组帧动画 jump : [26, 51, 'end'], // 一组帧动画 end : [52, 63, 'run'] }, /** * frames : {width, height, count, regX, regY} 定义框架 width : 每帧的宽度 height : 每帧的高度 count : 多少帧后循环 regX, regY : 相对原始的便宜量 */ frames : { width : 166, height : 293, regX : -100, regY : 0, count : 64 } }); // 创建一个精灵 var sprite = new createjs.Sprite(ss, "run"); // 精灵缩放0.6 sprite.set({ scaleX : 0.6, scaleY : 0.6 }); stage.addChild(sprite, box1, box2); // 设置整体的帧频 createjs.Ticker.setFPS(20); // Ticker : 定时器 // setFPS : 设置每一秒的帧数 createjs.Ticker.setFPS // getFPS : 获得帧数 createjs.Ticker.getFPS createjs.Ticker.addEventListener("tick", function (e){ // 运行画布 stage.update(); }); // createJs 月亮 _________________________________________________________________________ var canvas; var stage; var starfield var moon; var sky; var width; var height; var init = function (){ canvas = document.getElementById("demoCanvas"); // 创建一个新画布 stage = new createjs.Stage(canvas); // 创建图形显示对象 sky = new createjs.Shape(); width = canvas.width; height = canvas.height; /** * beginLinearGradientFill([color1, ..., colorN], [0, 0.N, ..., 1], x0, y0, x1, y1) : 填充制渐变效果 [color1, color2, ..., colorN] : 填充渐变的颜色 只能有2个颜色 [0, 0.N, ..., 1] : 比率 类似CSS3的linear-granient里的5% 百分之几 x0, y0, x1, y1 : 渐变的方向 注意该渐变坐标点是以canvas的0,0点开始的 */ sky.graphics.beginLinearGradientFill(["#204", "#003", "#000"], [0, 0.15, 0.6], 0, height, 0, 0); sky.graphics.drawRect(0, 0, width, height); stage.addChild(sky); // 创建矢量图形对象 starfield = new createjs.Shape(); stage.addChild(starfield); // 缓存矢量图形 区域为整个画布 starfield.cache(0, 0, width, height); // 创建矢量图形对象 moon = new createjs.Shape(); // 圆形 moon.graphics.beginFill("#CCF").drawCircle(0, 0, 60); // 椭圆 moon.graphics.beginFill("#000").drawEllipse(-35, -57, 100, 114); // rotation : 旋转-30度 moon.rotation = -30; stage.addChild(moon); // 创建定时器 createjs.Ticker.addEventListener("tick", tick); // 设置动画帧频 30帧 createjs.Ticker.setFPS(30); }; var tick = function (){ starfield.graphics.beginFill('rgba(255, 255, 255, '+Math.random()+')'); // 星星在画布上的x轴位置 var stageW = Math.random()*width; // 星星在画布上的y轴位置 var stageH = Math.random()*height; // drawPolyStar(x, y, r, 边数, 箭头大小, rotate) : 多边形 starfield.graphics.drawPolyStar(stageW, stageH, Math.random()*4+1, 5, 0.93, Math.random()*360); // updateCache : 修改缓存 // source-overlay : 把每次的值迭代在一起 把每次画的星星迭代在一起 这么做的好处是以前绘制的图形会走缓存 // 只重新绘制新增加的图形 starfield.updateCache("source-overlay"); // 清除矢量图形已绘制的数据 重新绘制 以前绘制的直接走缓存 starfield.graphics.clear(); // 修改背景的颜色 // sky.alpha -= 0.0005; // 设置滑动月亮的宽 var w = canvas.width + 200; moon.x = (moon.x + 100 + 1 + w) % w - 100; moon.y = 250 - Math.sin(moon.x / w * Math.PI) * 150; stage.update(event); }; // createJs 缓存动画 _________________________________________________________________________ var canvas; var stage; var shape; var radius = 50; var rings = 20; var color; var fpsLabel; var l; var cc = true; var init = function (){ canvas = document.getElementById("demoCanvas"); // 创建画布 stage = new createjs.Stage(canvas); var colors = ["#FA0", "#09F", "#EEE", "#FFF", "#385", "#9b4"]; var length = colors.length; for(var i=0; i<100; i++){ // 创建一图形对象 shape = new createjs.Shape(); for (var j = rings; j > 0; j--) { color = colors[parseInt(Math.random()*length)]; // beginFill(颜色) : 颜色填充 shape.graphics.beginFill(color).drawCircle(0, 0, radius * j / rings); } // 设置图形对象的位置 shape.x = Math.random() * canvas.width; shape.y = Math.random() * canvas.height; // 新添加一个随机数属性velX shape.velX = Math.random() * 10 - 5; shape.velY = Math.random() * 10 - 5; stage.addChild(shape); } // Text : 创建文本对象 fpsLabel = new createjs.Text("-- fps", "bold 18px Arial", "#FFF"); stage.addChild(fpsLabel); fpsLabel.x = 10; fpsLabel.y = 20; fpsLabel.lineHeight = 80; /** * Ticker : 定时器 timingMode : 指定计时器的使用模式 TIMEOUT : setTimeout 模式 RAF : requestAnimationFrame 模式 RAF_SYNCHED : 一种更好的运行模式 */ createjs.Ticker.timingMode = createjs.Ticker.RAF; // 绑定计时器 createjs.Ticker.addEventListener("tick", tick); // 点击 $('.btn1').on('click', function (){ toggleCache(1); }); $('.btn2').on('click', function (){ toggleCache(0); }); }; var tick = function (){ // 计算画布 + 圆球的总宽度 高度 var w = canvas.width + radius * 2; var h = canvas.height + radius * 2; // 获得创建的stage对象的总数 l = stage.getNumChildren() - 1; for(var i=0; i 800) this.t=false; shape.y += Math.random() + 2; shape.scaleX = Math.random() * 1.5; shape.scaleY = Math.random() + 0.5; } } // 把雨滴层插入到动画层 con.addChild(container); this.stage.addChildAt(con, 0); con.updateCache('lighter'); this.stage.update(); } }; new Rain(); // createJs tick计时器 _________________________________________________________________________ /** * createjs.Ticker.tick(fn, time) : 计时器方法 * fn : 运行函数 * time : 间隔运行时间 毫秒数 */ createjs.Ticker.tick = function (fn, time){ var t = 0; var isTrue = true; createjs.Ticker.addEventListener("tick", tick); function tick(e){ // 如果时间差大于等于time 执行fn if(e.time - t >= time){ console.log(1); fn(); isTrue = true; } if(isTrue){ // 重新赋值新时间 t = e.time; isTrue = false; } }; }; createjs.Ticker.tick(abc, 1000); // 创建画布 var stage = new createjs.Stage('demoCanvas'); function abc(){ for(var i=0; i<10; i++){ var shape = new createjs.Shape(); var random = Math.random() * 0.5; shape.graphics.beginFill('rgba(255, 255, 255, ' + random + ')').drawEllipse(0, 0, 1, 8); // 设置矢量对象的位置 要把图像充满 shape.x = 800 * Math.random(); shape.y = 400 * Math.random(); stage.addChild(shape); } stage.update(); }; // createJs 蒙版动画 _________________________________________________________________________ var isDrawing, oldPt, oldMidPt, cursor, drawingCanvas, bitmap, blur, textInfo, stage, text, elImg, width, height; var init = function (){ elImg = document.createElement('img') elImg.setAttribute('src', '../a1.jpg'); // 创建画布 stage = new createjs.Stage("demoCanvas"); // 创建文本 text = new createjs.Text("", "20px Microsoft Yahei", "#FFFFFF"); /** * set() : 字体的属性 * x, y : 字体位置 * lineWidth : 字体宽度 只对单词有效 * textBaseline : 字体上下对齐方式 * textAlign : 字体左右对齐方式 */ text.set({ x : 10, y : 10, // 这里是居中对齐 文字的0, 0点是中间位置 所以后面的cache方法 // 如果想把文字都显示出来 需要给x轴负值 textAlign : 'left', text : '图片模糊例子' }); elImg.onload = function (){ width = elImg.width; height = elImg.height; handleComplete(); }; }; window.onload = function (){ init(); }; var handleComplete = function (){ // 创建图形显示对象 drawingCanvas = new createjs.Shape(); // 加载图片对象 bitmap = new createjs.Bitmap(elImg); // 加载图片对象 blur = new createjs.Bitmap(elImg); // 因为图片没有插入DOM 所以这里使用canvas获得图片的宽高 // getBounds() : 获取图片对象的属性 {x, y, width, height} textInfo = blur.getBounds(); // 设置canvas的宽 高 必须用这种方式 $('#demoCanvas')[0].width = width; $('#demoCanvas')[0].height = height; // enableMouseOver : 设置灵敏度 手势 stage.enableMouseOver(10); // stagemousedown : stage专有方法 鼠标按下 stage.addEventListener("stagemousedown", handleMouseDown); // stagemouseup : stage专有方法 鼠标抬起 stage.addEventListener("stagemouseup", handleMouseUp); // stagemousemove : stage专有方法 move事件 stage.addEventListener("stagemousemove", handleMouseMove); // BlurFilter(x轴模糊度, y轴模糊度, 质量) : 创建模糊对象 // ColorMatrix(亮度, 对比度, 饱和度, 色调) : 创建颜色对象 // ColorMatrixFilter(new createJs.ColorMatrix) : 根据颜色对象创建实例 blur.filters = [new createjs.BlurFilter(24, 24, 2), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(60))]; blur.cache(0, 0, width, height); stage.addChild(blur, text, bitmap); // 应用模糊 颜色对象 updateCacheImage(false); // beginFill(颜色) : 填充颜色 // drawCircle(x, y, r) : 绘制圆形 cursor = new createjs.Shape(new createjs.Graphics().beginFill("#FFFFFF").drawCircle(0, 0, 25)); // 设置手型 cursor.cursor = "pointer"; stage.addChild(cursor); }; var handleMouseDown = function (){ // Point(x, y) : 设置一个二维坐标系 {x, y} 保存鼠标按下时的位置 oldPt = new createjs.Point(stage.mouseX, stage.mouseY); oldMidPt = oldPt; isDrawing = true; }; var handleMouseUp = function (){ updateCacheImage(true); isDrawing = false; }; var handleMouseMove = function (){ cursor.set({ x : stage.mouseX, y : stage.mouseY }); // 鼠标抬起时 不再让白色圆球跟鼠标移动 if (!isDrawing) { stage.update(); return; } // curveTo(x0, y0, x1, y1) : 根据2条直线绘制曲线 需要跟moveTo连用 var midPoint = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y + stage.mouseY>>1); // drawingCanvas.graphics : 这种方式会把该对象下的每次画的图形集中到一起 // new Graphics() : 这种方法每次都是单独的存在 drawingCanvas.graphics.setStrokeStyle(40, "round", "round") .beginStroke("rgba(0,0,0,0.6)") .moveTo(midPoint.x, midPoint.y) .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y); oldPt.x = stage.mouseX; oldPt.y = stage.mouseY; oldMidPt.x = midPoint.x; oldMidPt.y = midPoint.y; updateCacheImage(true); }; var updateCacheImage = function (update){ if(update){ // updateCache(x, y, width, height) : 如果图片对象已经加载过 使用缓存加载 // source-overlay : 绘制新的矢量到现有的缓存 同源叠加的复合经营合成它 /** * updateCache(x, y, width, height) : 如果图片对象已经添加过缓存 使用修改缓存 source-overlay : 绘制新的矢量到现有的缓存 同源叠加的复合经营合成它 上次绘 制的图形会直接走缓存 比使用cache快 因为他只绘制新增加的图 */ drawingCanvas.updateCache('source-overlay'); }else{ // cache(x, y, width, height) : 创建模糊对象在画布上的显示范围 drawingCanvas.cache(0, 0, width, height); } // 清除上次的矢量图形值 drawingCanvas.graphics.clear(); /** * AlphaMaskFilter(图形对象.cacheCanvas) : 以图形对象创建一个蒙板 只有该图形显示的地方应用 该蒙板的图形才会显示 */ var maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas); bitmap.filters = [maskFilter]; if(update){ bitmap.updateCache(0, 0, width, height); }else{ bitmap.cache(0, 0, width, height); } stage.update(); }; // createJs 旋转 _________________________________________________________________________ var stage, container, canvas; var init = function (){ canvas = document.getElementById('demoCanvas'); // 创建舞台 stage = new createjs.Stage(canvas); // 创建一个层 container = new createjs.Container(); // 插入到舞台 stage.addChild(container); // 创建矢量图形对象 var frame = new createjs.Shape(); frame.graphics.beginFill("#F90").drawRect(0, 0, 300, 300); // regX : x轴便宜150像素 // regY : y轴偏移150像素 偏移后0, 0点发生改变 frame.regX = 150; frame.regY = 150; /** * DOMElement(节点对象) : 根据页面节点创建一个对象 供canvas使用 * 调用了该方法的节点会被默认添加一个absolute属性 * 如果是添加到stage中 会以stage为0,0点 如果stage设置了margin属性 则该位置会有偏差 */ var content = new createjs.DOMElement("xsa"); content.regX = 150; content.regY = 150; // 把矢量对象 节点对象插入到Layer container.addChild(frame, content); container.x = 300; container.y = 200; container.rotation = -45; stage.update(event); // 设置定时器计时方式为requestAnimationFrame createjs.Ticker.timingMode = createjs.Ticker.RAF; createjs.Ticker.addEventListener("tick", tick); }; var tick = function (e){ // event.delta : 当前帧的执行时间多少毫秒 container.rotation += e.delta * 0.01; // alpha : 设置透明度 // rotation : 获得当前旋转角度 container.alpha = 0.5 * (1 + Math.cos(container.rotation * 0.01)); stage.update(event); }; // createJs 双击 _________________________________________________________________________ var init = function (){ var canvas = document.getElementById("demoCanvas"); // 创建舞台 var stage = new createjs.Stage(canvas); // 创建一个Layer var container = new createjs.Container(); container.x = 100; container.y = 80; // 创建一个矢量图形对象 var target = new createjs.Shape(); // 绘制一个矩形 target.graphics.beginFill("#F60").drawRect(-10, -10, 300, 60); // 插入到层 container.addChild(target); // 创建一个文本 var txt = new createjs.Text("双击这里！", "36px Arial", "#FFF"); // 文字对齐方式 txt.textBaseline = "top"; // 文字插入到层 container.addChild(txt); stage.addChild(container); // dblclick : 双击事件 container.on("dblclick", function (evt) { alert("双击事件！"); }); stage.update(); }; // createJs 画板 _________________________________________________________________________ var canvas, stage; var drawingCanvas; var oldPt; var oldMidPt; var title; var color; var stroke; var colors; var index; var init = function (){ canvas = document.getElementById("demoCanvas"); index = 0; colors = ["#F60", "#06F", "#0f6", "#fad779", "#f9e4ad", "#faf2db", "#563512"]; stage = new createjs.Stage(canvas); /** * autoClear : 不清除画布的内容 画布上绘制的所有东西 都将保留 不能清除 true(默认) : 清除 false : 不清除 */ stage.autoClear = false; /** * enableDOMEvents : 开启事件监听 true : 开启事件监听 false : 关闭事件监听 */ stage.enableDOMEvents(true); // createjs.Touch.enable(stage) : 开启触摸 createjs.Touch.enable(stage); // 设置动画帧数 createjs.Ticker.setFPS(24); // 创建矢量图形对象 drawingCanvas = new createjs.Shape(); stage.addEventListener("stagemousedown", handleMouseDown); stage.addEventListener("stagemouseup", handleMouseUp); title = new createjs.Text("点击开始画图！", "36px Arial", "#777777"); title.x = 120; title.y = 200; stage.addChild(title); stage.addChild(drawingCanvas); stage.update(); }; var handleMouseDown = function (){ // contains(对象) : 某个对象中是否包含另外一个对象 if (stage.contains(title)) { // 清除画布 stage.clear(); // removeChild(对象) : 删除某个对象 // 因为重新调用了update 所以这里清除掉title // 因为调用了autoClear所以这里必须重新调用一次clear stage.removeChild(title); } color = colors[(index++) % colors.length]; stroke = Math.random() * 30 + 10; // 创建一个{x, y}二维对象 oldPt = new createjs.Point(stage.mouseX, stage.mouseY); // 复制二维对象 oldMidPt = oldPt.clone(); stage.addEventListener("stagemousemove", handleMouseMove); }; // 绘制曲线方法 var handleMouseMove = function (){ var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1); // 调用clear 清除上次绘制的图形 drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y); oldPt.x = stage.mouseX; oldPt.y = stage.mouseY; oldMidPt.x = midPt.x; oldMidPt.y = midPt.y; stage.update(); }; var handleMouseUp = function (){ // 删除move事件 stage.removeEventListener("stagemousemove", handleMouseMove); }; // createJs rollover _________________________________________________________________________ // 创建画布 var stage = new createjs.Stage('demoCanvas'); var shape = new createjs.Shape(); var shape2 = new createjs.Shape(); container = new createjs.Container(); // 绘制2个矩形 shape.graphics.beginFill('#FFF').rect(100, 100, 50, 50); shape2.graphics.beginFill('#069').rect(150, 100, 50, 50); // 设置手型和鼠标灵敏度 使用rollover mousemover时 必须使用这个属性 stage.enableMouseOver(10); container.addChild(shape, shape2); // 鼠标从shape滑到shape2时 会产生mouseout事件 // container.on('mouseover', function (){ // console.log(11111); // }); // container.on('mouseout', function (){ // console.log(22222); // }); /** * rollover : 一个容器有A B 2个对象 从对象A滑动到对象B时 因为还在容器内 rollout 我们希望不新触发out over事件 这时就需要用rollover和rollout事件 rollover和rollout事件 在一个容器内 从一个容器滑动到另一个 容器时不会新触发out over事件 */ container.on('rollover', function (){ console.log(11111); }); container.on('rollout', function (){ console.log(22222); }); stage.addChild(container); stage.update(); // createJs 拖拽 _________________________________________________________________________ var canvas, stage; var mouseTarget; var dragStarted; var offset; var update = true; var init = function (){ canvas = document.getElementById("demoCanvas"); // 创建舞台 stage = new createjs.Stage(canvas); // 开启触摸模式 默认是关闭的 createjs.Touch.enable(stage); // 设置手型和灵敏度 stage.enableMouseOver(10); /** * mouseMoveOutside : 鼠标跟踪 true : 鼠标离开canvas继续监听 false : 鼠标离开canvas不继续监听 */ stage.mouseMoveOutside = true; // 创建图片对象 var image = new Image(); image.src = "../daisy.png"; image.onload = handleImageLoad; }; var handleImageLoad = function (event){ var image = event.target; var bitmap; // 创建Layer var container = new createjs.Container(); // 把层插入到舞台 stage.addChild(container); for(var i=0; i<50; i++){ // 创建createJs的图片对象 bitmap = new createjs.Bitmap(image); // 图片对象插入到Layer container.addChild(bitmap); bitmap.x = canvas.width * Math.random(); bitmap.y = canvas.height * Math.random(); bitmap.rotation = 360 * Math.random(); // regX, regY : 设置图片的偏移位置 从而改变中心点位置 bitmap.regX = bitmap.image.width / 2; bitmap.regY = bitmap.image.height / 2; // 对图片的宽 高进行缩放 // 并添加一个属性scale记录缩放的大小 bitmap.scaleX = bitmap.scaleY = bitmap.scale = Math.random() * 0.4 + 0.6; // 设置手型 bitmap.cursor = "pointer"; // 给每个图形添加 mousedown事件 bitmap.on("mousedown", function (evt){ // stageX, stageY : 获得鼠标位置 // 记录一个offset属性 记录鼠标点击的偏移量 this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY}; }); // 给每个图形对象注册move事件 bitmap.on("pressmove", function (evt){ // 计算鼠标在图形对象上的偏移位置 this.x = evt.stageX + this.offset.x; this.y = evt.stageY + this.offset.y; // move事件触发时 用update变量控制渲染 update = true; }); // 给每个图形对象注册over事件 bitmap.on("mouseover", function (evt) { // 划过时放大1.2倍 this.scaleX = this.scaleY = this.scale * 1.2; // over事件触发时 用update控制渲染 update = true; }); // 给每个图形对象注册out事件 bitmap.on("mouseout", function (evt) { // 划出时缩小到原始尺寸 this.scaleX = this.scaleY = this.scale; update = true; }); } // 启动计时器 createjs.Ticker.addEventListener("tick", tick); }; var tick = function (e){ // 只有update为真时才渲染 if(update){ update = false; stage.update(); } }; // createJs 拖拽区域 _________________________________________________________________________ var canvas, stage; var mouseTarget; var dragStarted; var offset; var update = true; var init = function (){ canvas = document.getElementById('demoCanvas'); // 创建舞台 stage = new createjs.Stage(canvas); // 开启Touch监听 createjs.Touch.enable(stage); // 设置手型 和 事件灵敏度 stage.enableMouseOver(10); // 设置鼠标监听true : 鼠标离开canvas区域依旧可以监听 stage.mouseMoveOutside = true; var image = new Image(); image.src = "../daisy.png"; image.onload = handleImageLoad; }; var handleImageLoad = function (event){ var image = event.target; var bitmap; // 创建Layer var container = new createjs.Container(); // 把层插入到舞台 stage.addChild(container); // 创建矢量图形对象 var hitArea = new createjs.Shape(); // 创建一个椭圆 hitArea.graphics.beginFill("#f00").drawEllipse(-12, -15, 24, 18); hitArea.x = image.width / 2; hitArea.y = image.height / 2; for(var i=0; i<50; i++){ // 创建图片对象 bitmap = new createjs.Bitmap(image); // 插入到层 container.addChild(bitmap); bitmap.x = canvas.width * Math.random(); bitmap.y = canvas.height * Math.random(); bitmap.rotation = 360 * Math.random(); bitmap.regX = bitmap.image.width / 2; bitmap.regY = bitmap.image.height / 2; // 缩放0.6 - 1 // 给每个图片对象添加scale属性 记录缩放比例 bitmap.scaleX = bitmap.scaleY = bitmap.scale = Math.random() * 0.4 + 0.6; bitmap.cursor = "pointer"; /** * hitArea : 添加区域 添加后的对象事件都在这个区域中可用 区域会随着要添加区域的对象变化而变化 例如对象 放大 旋转时 该区域对象也会随着放大 旋转 */ bitmap.hitArea = hitArea; bitmap.addEventListener("mousedown", function(evt) { var o = evt.target; // 点击位置 o.offset = {x: o.x - evt.stageX, y: o.y - evt.stageY}; }); bitmap.addEventListener("pressmove", function(evt) { var o = evt.target; o.x = evt.stageX + o.offset.x; o.y = evt.stageY + o.offset.y; // 重新渲染 update = true; }); // rollover : 划过事件 不产生冒泡 bitmap.addEventListener("rollover", function(evt) { var o = evt.target; // 缩放1.2备 o.scaleX = o.scaleY = o.scale * 1.2; // 重新渲染 update = true; }); // rollout : 划出事件 不产生冒泡 bitmap.addEventListener("rollout", function(evt) { var o = evt.target; // 划出时 恢复到原始大小 o.scaleX = o.scaleY = o.scale; // 重新渲染 update = true; }); }; // 注册计时器 createjs.Ticker.addEventListener("tick", tick); }; var tick = function (event){ if (update) { // 运行一次后赋值false 保证每次事件行为只触发一次 update = false; // 每次canvas页面变化时 重新渲染 stage.update(event); } }; // createJs mouseChildren _________________________________________________________________________ // shape矢量对象 和 Layer都绑定了click事件 设置了mouseChildren // 为false以后 shape矢量对象的事件被屏蔽掉了 只触发Layer的事件 var stage = new createjs.Stage('demoCanvas'); var c = new createjs.Container(); var s = new createjs.Shape(); var t = new createjs.Text("", "24px Microsoft Yahei", "#FFF"); var str1 = str2 = ''; s.graphics.beginFill('#FFF').rect(100, 100, 80, 50); /** * mouseChildren : 是否屏蔽子节点事件 true : 不屏蔽子节点绑定的事件 false : 屏蔽子节点绑定的事件 */ c.mouseChildren = false; s.on('click', function (){ str1 = 'shape元素'; text(); }); c.on('click', function (){ str2 = 'Container元素, shape元素事件被屏蔽了'; text(); }); c.addChild(s); stage.addChild(c); stage.update(); var text = function (str){ t.text = str1 + str2; stage.addChild(t); stage.update(); }; // 捕获 var stage, text, text2, str = '捕获: '; var lastPhase = 0; var init = function (){ // 创建舞台 stage = new createjs.Stage('demoCanvas'); // 手型和鼠标灵敏度 stage.enableMouseOver(10); // 创建一个Layer 并插入到舞台 var container = stage.addChild(new createjs.Container()); // 创建一个矢量对象图形 设置坐标后插入Layer var shape = container.addChild(new createjs.Shape()); // 矩形 shape.graphics.beginFill("#F90").drawRect(100, 100, 100, 100); // true : 捕获事件 // 舞台添加click事件 stage.addEventListener("click", handleClick, true); // 层添加click事件 container.addEventListener("click", handleClick, true); // 矢量图形添加click事件 shape.addEventListener("click", handleClick, true); // 非捕获事件 stage.addEventListener("click", handleClick); container.addEventListener("click", handleClick); shape.addEventListener("click", handleClick); container.cursor = "pointer"; stage.addEventListener("pressmove", function (evt) { console.log("move!"); }); stage.addEventListener("pressup", function (evt) { console.log("up!", evt); }); // 创建文本对象 插入到舞台 text = stage.addChild(new createjs.Text("Click the shape.", "24px Microsoft Yahei", "#FFF")); text.set({x: 240, y: 20, lineHeight: 20}); createjs.Ticker.addEventListener("tick", stage); }; var lastPhase = 0; function handleClick(evt) { if (evt.currentTarget == stage && (evt.eventPhase == 1 || evt.eventPhase == 2)) { console.log(1); text.text = ""; } if (evt.eventPhase != lastPhase) { text.text += ">> " + ["capture", "target", "bubble"][evt.eventPhase - 1] + " phase:\n"; lastPhase = evt.eventPhase; } text.text += "type=" + evt.type + " target=" + evt.target.name + " eventPhase=" + evt.eventPhase + " currentTarget=" + evt.currentTarget.name + "\n"; }