[H5动画制作系列] Sprite及Text Demo

参考代码:

sprite.js:

var canvas, stage, container;
canvas = document.getElementById("mainView");
function init() {stage = new createjs.Stage(canvas);createjs.Touch.enable(stage);var loader = new createjs.LoadQueue(false);loader.addEventListener("complete", loadCompleteHandler);loader.loadManifest([{ src: "sprite.png", id: "woody_0" }]);container = new createjs.Container();stage.addChild(container);createjs.Ticker.setFPS(24);createjs.Ticker.addEventListener("tick", stageBreakHandler);
}
function loadCompleteHandler(event) {event.currentTarget.removeEventListener("complete", loadCompleteHandler);var spriteData = {images: ["sprite.png"],frames: { width: 128, height: 128, regX: 0, regY: 0 },animations: {spin: [0, 64, "spin", 1],// walk: {//     frames: [4, 5, 6, 7, 6, 5],//     next: "walk",//     speed: 0.3// }        }};var spriteSheet = new createjs.SpriteSheet(spriteData);var sprite = new createjs.Sprite(spriteSheet, "spin");container.addChild(sprite);sprite.x = 512;sprite.y = 512;//sprite.gotoAndPlay("stand")
}
function stageBreakHandler(event) {stage.update();
}

Test.html:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="authoring-tool" content="Adobe_Animate_CC" /><title>textDemo</title>  <!-- write your code here -->    </head><body onload="init();" style="margin: 0px"><canvasid="mainView"width="1024"height="1024"style="position: absolute;display: block;background-color: rgba(255, 255, 255, 1);"></canvas><script src="https://code.createjs.com/1.0.0/createjs.min.js"></script><script src="sprite.js"></script></body>
</html>

sprite.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/74829.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云计算与虚拟化

一、概念 什么是云计算&#xff1f; 云计算&#xff08;cloud computing&#xff09;是分布式计算的一种&#xff0c;指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序&#xff0c;然后&#xff0c;通过多部服务器组成的系统进行处理和分析这些小程序得到结果…

SLAM论文详解(5) — Bundle_Adjustment_LM(BALM)论文详解

目录 1 摘要 2 相关工作 3 BA公式和导数 A. 直接BA公式 B. 导数 C. 二阶近似 4 自适应体素化 5. 将BALM结合进LOAM 6. 实验 7. 算法应用场景解析 1 摘要 Bundle Adjustment是一种用于同时估计三维结构和传感器运动运动的优化算法。在视觉SLAM&#xff0c;三维重建等…

剑指 Offer 30. 包含min函数的栈

剑指 Offer 30. 包含min函数的栈 方法一 使用两个栈。 class MinStack {Deque<Integer> stack new ArrayDeque<>();Deque<Integer> stack_min new ArrayDeque<>();public MinStack() {}public void push(int x) {stack.push(x);if(stack_min.isEm…

eclipse

快捷键 F4: 继承树 F3: 查看变量、方法、类的定义, 跳到光标所在标识符的定义代码。(Ctrl左键) CtrlShiftG&#xff1a; 在工作空间中查找引用了光标所在标识符的位置。与F3相反的快捷键。当按类定义进行阅读时&#xff0c;当前类方法或者函数在被哪些地方调用 controlTAB: 切…

怎样理解NgRx中的reducer,action,和state?

在NgRx中&#xff0c;Reducer、Action和State是核心概念&#xff0c;用于实现应用程序的状态管理。以下是对这些概念的解释和理解&#xff1a; Reducer&#xff08;减速器&#xff09;&#xff1a; 定义&#xff1a; Reducer是一个纯函数&#xff0c;接受当前状态&#xff08…

[Docker Java 服务]Docker 容器中Java服务问题排查

排查工具 - Arthas 官方介绍 Arthas 是一款线上监控诊断产品&#xff0c;通过全局视角实时查看应用 load、内存、gc、线程的状态信息&#xff0c;并能在不修改应用代码的情况下&#xff0c;对业务问题进行诊断&#xff0c;包括查看方法调用的出入参、异常&#xff0c;监测方法…

爬虫逆向实战(30)-某查查股东关联公司(HmacSHA512)

一、数据接口分析 主页地址&#xff1a;某查查 1、抓包 通过抓包可以发现数据接口是api/people/getRelatCompany 2、判断是否有加密参数 请求参数是否加密&#xff1f; 无 请求头是否加密&#xff1f; 通过查看“标头”可以发现&#xff0c;请求头中有一个key和value都是…

基于Sentinel的微服务保护

前言 Sentinel是Alibaba开源的一款微服务流控组件&#xff0c;用于解决分布式应用场景下服务的稳定性问题。Sentinel具有丰富的应用场景&#xff0c;它基于流量提供一系列的服务保护措施&#xff0c;例如多线程秒杀情况下的系统承载&#xff0c;并发访问下的流量控制&#xff…

9.8day59

503. 下一个更大元素 II - 力扣&#xff08;LeetCode&#xff09; 知识点&#xff1a;单调栈 42. 接雨水 - 力扣&#xff08;LeetCode&#xff09;

Qt的窗口系统

代码仓库以及参考文件见文章底部 坐标体系 要想学好GUI,界面的坐标系首先要搞清楚 在Qt编程中,以左上角为原点,X向右增加,Y向下增加。 对于所有嵌套的窗口,其坐标是相对于父窗口来说的。 QWidget 所有窗口以及窗口控件都是从QWidget直接或者间接派生出来的。 对象模…

蓝桥杯官网练习题(图像模糊)

题目描述 小蓝有一张黑白图像&#xff0c;由 nm 个像素组成&#xff0c;其中从上到下共 n 行&#xff0c;每行从左到右 &#xfffd;m 列。每个像素由一个 0 到 255 之间的灰度值表示。 现在&#xff0c;小蓝准备对图像进行模糊操作&#xff0c;操作的方法为&#xff1a; 对…

基于Fomantic UI Web构建 个人导航站点网站源码 网站技术导航源码

BYR-Navi-master好看有个性的网站技术导航源码 该网站基于Fomantic UI Web框架构建&#xff0c;整个项目的设计和构建具有高度的配置和定制灵活性。 整体风格比较适合个人导航站点使用 搜索框输入关键词后&#xff0c;点击上方搜索引擎图标可跳转打开对应搜索引擎搜索结果&am…

std : : vector

一.简介 std::vector 的底层实现通常基于动态数组&#xff08;dynamic array&#xff09;&#xff0c;它是一种连续分配的内存块&#xff0c;允许元素的快速随机访问。下面是 std::vector 的一些关键特点和底层实现细节&#xff1a; 连续内存块&#xff1a;std::vector 内部使…

MAC M1芯片安装mounty读写移动硬盘中的文件

因为移动硬盘中的文件是微软公司NTFS格式&#xff0c;MAC只支持自己的APFS或者HFS&#xff0c;与微软的NTFS不兼容&#xff0c;所以需要第三方的软件来支持读写硬盘中的文件&#xff0c;经过一上午的折腾&#xff0c;最终选择安装mounty这个免费的第三方软件 工具网址连接&am…

祝贺!Databend Cloud 入驻 AWS 云市场

关于 Databend Cloud Databend Cloud 是基于开源云原生数仓项目 Databend 打造的一款易用、低成本、高性能的新一代大数据分析平台&#xff0c;提供一站式 SaaS 服务&#xff0c;免运维、开箱即用。 Databend Cloud 架构如下&#xff1a; 存储层完全面向对象存储而设计。 计算…

[论文笔记]BiMPM

引言 这又是一篇文本匹配的论文Bilateral Multi-Perspective Matching for Natural Language Sentences阅读笔记。 论文题目为自然语言文本中双向多视角匹配。 提出了BiMPM(bilateral multi-perspective matching)模型: 基于匹配-聚合(比较-聚合)框架; 采用双向匹配提取交…

第25节-PhotoShop基础课程-文本工具组

文章目录 前言1.横排文字工具1.基本操作1.字体选择2.字体大小3.字体颜色4.左对齐5.右对齐6.居中对齐 2.字符 2.段落文字3.蒙版文字 前言 1.横排文字工具 1.基本操作 1.字体选择 2.字体大小 3.字体颜色 4.左对齐 5.右对齐 6.居中对齐 2.字符 2.段落文字 3.蒙版文字

如何正确使用 WEB 接口的 HTTP 状态码和业务状态码?

当设计和开发 Web 接口时&#xff0c;必然会和 HTTP 状态码与业务状态码这两个概念打交道。很多同学可能没有注意过这两个概念或者两者的区别&#xff0c;做得稀里糊涂&#xff0c;接下来详细讲解下二者的定义、区别和使用方法。 HTTP 状态码 HTTP 状态码是由 HTTP 协议定义的…

Stable Diffusion 告别猜关键词,LoRA适配关键词自动生成

有没有想想过在SD绘图的时候下载好的LoRA模型选择之后不生效是为什么?或者说关键词不知道怎么填写? 这里介绍基于 Civitai 的LoRA 使用方法。 文章目录 Civitai 插件使用方法Civitai 插件 如果没有安装的小伙伴可以参考前面的文章先对 Civitai 的模型管理进行安装和使用,确…

【iOS】MVC

文章目录 前言一、MVC各层职责1.1、controller层1.2、model层1.3、view层 二、总结三、优缺点3.1、优点3.2、缺点 四、代码示例 前言 MVC模式的目的是实现一种动态的程序设计&#xff0c;使后续对程序的修改和扩展简化&#xff0c;并且使程序某一部分的重复利用成为可能。除此…