当前位置： 首页 > news >正文

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

news 2026/3/31 3:12:46

参考代码:

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

相关文章：

[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(&q…...

编程日记 2023/9/11 17:29:48

目标检测YOLO实战应用案例100讲-毫米波辐射图像去模糊重建与目标检测

目录 前言 毫米波辐射图像去模糊重建研究现状 基于传统算法的图像去模糊重建...

编程日记 2023/9/11 17:28:48

Android10 SystemUI系列（一）概述

一、前言 由于笔者之前负责过SystemUI，之前没有抽空把很多东西整理出来，趁着最近不太忙，就慢慢动手梳理一下，顺便把自己遇到的问题也整理一下，当然自己之前主要看的是android11 之后的源码。这次主要是Android10 的源码，当然原理大差不差，也算是自己沉淀一下了 二、Sy…...

编程日记 2023/9/11 17:27:47

SpringMVC的常用注解，参数传递以及页面跳转的使用

目录 slf4j 常用注解 RequestMapping RequestParam RequestBody PathVariable 参数传递 首先在pom.xml配置文件中导入SLF4J的依赖 基础类型String 复杂类型 RequestParam PathVariable RequestBody 增删改查 返回值 void返回值 String返回值 modelString …...

编程日记 2023/9/11 17:26:45

Java“牵手”易贝商品列表数据，关键词搜索易贝商品数据接口，易贝API申请指南

ebay商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取ebay商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问ebay商城的网页来获取商品详情信息。以下是两种常用方法的介绍&…...

编程日记 2023/9/11 17:25:44

java中HashMap如何根据value的值去获取key是多少

在Java中&#xff0c;HashMap是一种基于键值对存储数据的数据结构。HashMap并没有直接提供根据value获取key的方法。但你可以通过遍历HashMap的entrySet&#xff0c;找到对应的value&#xff0c;然后获取其对应的key。 以下是一个示例代码&#xff1a; public <K, V> K…...

编程日记 2023/9/11 17:24:43

Python|OpenCV-色彩空间之RGB轨迹调试板(5)

前言 本文是该专栏的第5篇，后面将持续分享OpenCV计算机视觉的干货知识，记得关注。 通常情况下，在处理图像需求的时候，需要掌握多个色彩空间的知识点。现实中，我们肉眼可以看到多种颜色，色彩是人的眼睛对于不同频率的光线的不同感受，其既是客观存在的，也是主观感知的。…...

编程日记 2023/9/11 17:23:42

安全生产：CVE-2020-11022/CVE-2020-11023漏洞解析

文章目录 一、前言二、漏洞原理三、修复方案3.1 升级jQuery3.2 1.x 升级至 3.x 需要考虑的问题3.2.1 table表格元素自动添加tbody3.2.2 方法变更 3.3 jquery migrate是什么 四、拓展阅读 一、前言 代码安全扫描阶段&#xff0c;前端资源审计发现jQuery版本过低导致生产系统存在…...

编程日记 2023/9/11 17:22:40

手写Spring：第17章-通过三级缓存解决循环依赖

文章目录 一、目标&#xff1a;通过三级缓存解决循环依赖二、设计&#xff1a;通过三级缓存解决循环依赖2.1 通过三级缓存解决循环依赖2.2 尝试使用一级缓存解决循环依赖 三、实现&#xff1a;通过三级缓存解决循环依赖3.1 工程结构3.2 通过三级缓存解决循环依赖类图3.3 设置三…...

编程日记 2023/9/11 17:21:39

C#使用proto

写多了go代码&#xff0c;被go mod tidy惯坏了&#xff0c;还以为全天下的都很好用呢&#xff0c;结果发现并不是这样。尤其是项目组的proto还是又封了个工具直接就能跑得&#xff0c;导致以为没那么复杂的事情变得复杂了起来。是有两套生成的规则&#xff0c;时间有点晚&#…...

编程日记 2023/9/11 17:20:38

Java基础知识面试题（一）（英语答案）

加油 前言Java中的基本数据类型包括以下几种：String和StringBuilder的区别是什么？什么是面向对象编程（OOP）？如何在Java中创建一个类？什么是继承？如何在Java中实现继承？什么是多态性？如何在Java中实现多态性？什么是封装和继承？什么是接口（Interface）？如何在Java中…...

编程日记 2023/9/11 17:19:37

基于csv数据建立线性回归模型并预测进行评估模型表现案例实现

一、数据处理 1.加载csv数据进行查看 import pandas as pd data pd.read_csv("generated_data.csv") print(data)2.将上述数据的x和y进行分离开&#xff0c;便于后续进行坐标建立 x data.loc[:,x] y data.loc[:,y] print(x,y)3.先使用matplotlib进行显示数据 …...

编程日记 2023/9/11 17:18:36

MySQL学习问题记录

文章目录 MySQL学习问题记录1、查询记录自动根据id排序&#xff1f; MySQL学习问题记录 1、查询记录自动根据id排序&#xff1f; step1&#xff1a;建表 表项信息&#xff1a; 写入数据顺序id为10 2 7 1。查寻时返回记录顺序为1 2 7 10&#xff1f; 更新一条数据后仍然按照…...

编程日记 2023/9/11 17:17:35

YMatrix 5.0 与天翼云完成产品兼容性认证

近日&#xff0c;北京四维纵横数据技术有限公司与天翼云宣布完成产品兼容性认证。经过双方严格的测试验证&#xff0c;超融合数据库 YMatrix 5.0 与天翼云兼容性良好&#xff0c;可基于天翼云稳定运行。 数据库系统作为基础软件的核心&#xff0c;自主可控势在必行。在此背景下…...

编程日记 2023/9/11 17:16:33

蓝桥杯官网练习题（旋转）

题目描述 图片旋转是对图片最简单的处理方式之一&#xff0c;在本题中&#xff0c;你需要对图片顺时针旋转 90 度。 我们用一个 nm 的二维数组来表示一个图片&#xff0c;例如下面给出一个 34 的 图片的例子&#xff1a; 1 3 5 7 9 8 7 6 3 5 9 7 这个图片顺时针旋转 90 …...

编程日记 2023/9/11 17:15:31

Jtti：Linux如何开机启动bootstrap

在Linux中&#xff0c;"bootstrap"通常不是一个单独的启动项&#xff0c;而是指引导过程的一部分。引导过程涉及到启动引导加载程序&#xff0c;加载内核&#xff0c;初始化系统并启动各种服务。启动过程中不会直接启动"bootstrap"&#xff0c;而是通过引导…...

编程日记 2023/9/11 17:14:30

qt之事件循环与线程的关系

先说重点&#xff0c;先了解几个重要的概念&#xff0c; 事件调度器&#xff0c;该调度器的具体实现与操作系统相关&#xff0c;不同的操作系统具有不同的实现&#xff0c;例如linux系统下该调度器的实现为QEventDispatcherUNIX&#xff0c;而window下的他们的实现为QEventDis…...

编程日记 2023/9/11 17:13:26

Python 变量的定义和数据类型的转换

变量 变量的定义 基本语法&#xff1a;变量名 值 变量名是给对象贴一个用于访问的标签&#xff0c;给对象绑定名字的过程也称为赋值&#xff0c;赋值符号 “” 变量名自定义&#xff0c;要满足标识符命名规则。 Python中&#xff0c;不需要事先声明变量名及其类型&#xff…...

编程日记 2023/9/11 17:12:25

Android Java JVM常见问答分析与总结

一、JVM是什么 JVM是JavaVirtualMachine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;JVM是一种用于计算设备的规范&#xff0c;它是一个虚构出来的计算机&#xff0c;是通过在实际的计算机上仿真模拟各种计算机功能来实现的。 JVM的重要性 JVM这块是一个偏向于概念模…...

编程日记 2023/9/11 17:11:24

【业务功能篇102】springboot+mybatisPlus分页查询，统一返回封装规范

业务场景&#xff1a; 随着业务代码量增多&#xff0c;很多接口查询的分页写法各种各样&#xff0c;为了使项目工程代码易于维护&#xff0c;我们统一规范&#xff0c;相对没有那么复杂的接口&#xff0c;我们统一都在java的service实现类中&#xff0c;去完成分页查询的接口逻…...

编程日记 2023/9/11 17:10:22

中科蓝讯AB565X蓝牙耳机通话电流音、回声、杂音？手把手教你用PC工具调通它

中科蓝讯AB565X蓝牙耳机通话问题全解析&#xff1a;从硬件排查到参数调优实战指南 当你手握一款基于中科蓝讯AB565X芯片的蓝牙耳机样机&#xff0c;却在通话测试中遭遇电流音、回声和杂音时&#xff0c;那种挫败感我深有体会。作为深耕音频调试领域多年的工程师&#xff0c;我经…...

编程新知 2026/3/31 3:08:13

从BIOS到BMC：手把手拆解Redfish协议在服务器开机时的‘数据握手’全过程

从BIOS到BMC&#xff1a;手把手拆解Redfish协议在服务器开机时的‘数据握手’全过程 凌晨3点的数据中心&#xff0c;一台刚上电的服务器正以毫秒级速度完成自检。在这不足5秒的瞬间里&#xff0c;BIOS与BMC之间正通过Redfish协议进行着精密的数据舞蹈——这不是简单的信息交换&…...

编程新知 2026/3/31 2:19:29

Sentinel-1 SAR数据预处理后，如何在QGIS里做地表变化监测？一个完整案例

Sentinel-1 SAR数据在QGIS中的地表变化监测实战指南 当你在SNAP中完成了Sentinel-1 SAR数据的预处理&#xff0c;获得了地理编码后的后向散射系数图&#xff0c;这只是整个分析流程的开始。真正的挑战在于如何将这些数据转化为可操作的地表变化信息。本文将带你深入探索从预处理…...

编程新知 2026/3/31 0:26:43

M2LOrder模型LSTM原理浅析与实战：时序情感分析入门

M2LOrder模型LSTM原理浅析与实战&#xff1a;时序情感分析入门 你是不是经常看到一些智能客服或者社交平台&#xff0c;能分析出一段对话里用户情绪的变化&#xff1f;比如&#xff0c;用户一开始有点生气&#xff0c;聊着聊着又缓和了&#xff0c;最后还挺满意。这种对“情绪…...

编程新知 2026/3/31 0:24:42

自动驾驶避障算法实战：从动态规划(DP)到模型预测控制(MPC)的Matlab代码详解

自动驾驶避障算法实战&#xff1a;从动态规划到模型预测控制的Matlab实现 自动驾驶技术的核心挑战之一是如何在复杂环境中实现安全避障。本文将深入探讨两种主流算法——动态规划(DP)与模型预测控制(MPC)的代码级实现&#xff0c;通过Matlab示例展示它们如何协同工作来解决这一…...

编程新知 2026/3/30 23:47:11

STM32F103红外循迹避障小车实战：从Proteus仿真到实物调试全解析

1. STM32F103与红外循迹避障小车入门指南 第一次接触STM32F103做红外循迹避障小车时&#xff0c;我和很多初学者一样&#xff0c;以为照着网上的例程就能轻松搞定。但真正动手后发现&#xff0c;从仿真到实物调试的每个环节都可能遇到意想不到的问题。这个小车看似简单&#xf…...

编程新知 2026/3/30 20:36:39

破局MIDI控制困境：SendMIDI让命令行成为音乐创作的神经中枢

破局MIDI控制困境&#xff1a;SendMIDI让命令行成为音乐创作的神经中枢 【免费下载链接】SendMIDI Multi-platform command-line tool to send out MIDI messages 项目地址: https://gitcode.com/gh_mirrors/se/SendMIDI 在数字音乐制作的世界里&#xff0c;MIDI&#x…...

编程新知 2026/3/30 19:48:08

互联网大厂Java面试实战：严肃面试官与搞笑程序员谢飞机的三轮问答

互联网大厂Java面试实战&#xff1a;严肃面试官与搞笑程序员谢飞机的三轮问答 在互联网大厂Java岗位面试中&#xff0c;面试官不仅考察应聘者的技术深度&#xff0c;更关注其理解业务场景的能力和解决问题的方法。本文通过一场幽默而真实的模拟面试&#xff0c;呈现核心Java与周…...

编程新知 2026/3/30 19:29:30

卡证检测矫正模型开发环境搭建：PyCharm/IDEA项目配置全攻略

卡证检测矫正模型开发环境搭建&#xff1a;PyCharm/IDEA项目配置全攻略 你是不是刚拿到一个卡证检测矫正模型的项目&#xff0c;看着一堆代码和配置文件有点无从下手&#xff1f;特别是想用PyCharm或者IDEA这样的专业工具来开发调试&#xff0c;却不知道从哪一步开始配置环境&…...

编程新知 2026/3/30 17:34:08

突破跨平台壁垒：Whisky让macOS高效运行Windows程序的颠覆性方案

突破跨平台壁垒&#xff1a;Whisky让macOS高效运行Windows程序的颠覆性方案 【免费下载链接】Whisky A modern Wine wrapper for macOS built with SwiftUI 项目地址: https://gitcode.com/gh_mirrors/wh/Whisky 作为一名独立游戏开发者&#xff0c;李明曾因Mac无法运行…...

编程新知 2026/3/30 17:07:52