[H5动画制作系列] Red Square的四种方法-基础能力训练

已于 2023-11-03 00:18:55 修改
阅读量232 收藏
点赞数
分类专栏： Animate及Createjs 文章标签： 前端 createjs H5
于 2023-09-09 12:20:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vinglemar/article/details/132775924
版权
本文介绍了在前端开发中使用CreateJS创建H5动画的四种方法，包括在Animate中直接绘制静态画面发布，通过代码控制帧，利用元件影片剪辑，以及在Visual Studio Code中编写独立的Html文件。每种方法都详细说明了操作步骤，特别是舞台颜色和红正方形的设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

整体要求:  舞台背景为蓝色,大小为:400*400;左上角有一个红色正方形,大小为:200*200,中心点坐标为(0,0)

方法一:

启动Aninmate，用界面绘图工具，做一个单帧静态画面，然后采用Html Canvas发布。

方法二:

启动Aninmate,先做一个单帧，空白帧。然后在空白帧上,填写帧代码。

然后采用Html Canvas发布。

温馨提示:舞台背景颜色,可以在导出的Html文件上的canvas标签的属性上,添加以下代码:

style="background-color: blue;"

方法三:

启动Aninmate,先做一个单帧，空白帧。然后在库中,做一个元件影片剪辑:大小为:400*400,红正方形，链接名称:redSquare.空白帧上,填写帧代码:


                

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    


                



	

		

			

				
					
css20种让你提升技能的方法

				
			

			

				

					weixin_45567983的博客
				

				

					09-04
					
					299
					
				

			

		

		

			
				
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。
1.注意外边距折叠
与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。例如：
HTML<d...

			
		

	



                

            
              



	

		

			

				
					
HTML5和CSS3 WEB技术开发

				
			

			

				

					张晨光老师的播客
				

				

					01-02
					
					6945
					
				

			

		

		

			
				
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup

			
		

	



              


  
              

                


	

		

			

				
					
H5绘图和动画

				
			

			

				

					xxx_holic123的博客
				

				

					09-05
					
					1133
					
				

			

		

		

			
				
H5新增canvas标签，并提供了一套API，允许用户通过使用js脚本在canvas标签识别的画布上绘制图形、创建动画，甚至可以进行实时视频处理或渲染。

			
		

	





	

		

			

				
					
H5使用photo-sphere-viewer.js实现360°全景

				
			

			

				

					帆酱的博客
				

				

					11-01
					
					5178
					
				

			

		

		

			
				
官方网站：https://photo-sphere-viewer.js.org/

线上demo：点击查看

需要引入的文件


<link rel="stylesheet" href="./css/photo-sphere-viewer.min.css">
<!-- 3D -->
<script src="./js/three.min.js"></scr...

			
		

	



		

			
		



	

		

			

				
					
h5画布动画_画布动画简介

				
			

			

				

					cungui5726的博客
				

				

					08-23
					
					527
					
				

			

		

		

			
				
h5画布动画Animation in the <canvas> element is sufficiently different from traditional CSS, SVG and JavaScript animation that it deserves its own explanation:
 <canvas>元素中的动画与传统的CSS ， SVG和Java...

			
		

	





	

		

			

				
					
HTML5动画----canvas基础6（2定义颜色和样式、绘制图案）

				
			

			

				

					wenmin1987的博客
				

				

					08-16
					
					338
					
				

			

		

		

			
				
定义颜色和样式：context.fillStyle 和 context.strokeStyle


//填充和轮廓的颜色：context.fillStyle="red" context.strokeStyle="dark";
   //线型：线条的粗细、端点样式、两线段连接处样式、绘制交点的方式lineWidth,lineCap,lineJoin,miterLimit
   function draw(){
   var ctx = document.g...

			
		

	





	

		

			

				
					
----前端基础-学习总结

				
			

			

				

					开开心心的博客
				

				

					09-10
					
					316
					
				

			

		

		

			
				
这个摘要概述了前端开发的基本知识，包括HTML、CSS和JavaScript等核心技术。它涵盖了页面结构和样式设计、响应式布局、DOM操作以及事件处理等关键内容。这份总结旨在帮助读者快速理解前端开发，并提供了对前端优化的基本认识。

			
		

	





	

		

			

				
					
h5+canvas绘制动画时钟

				
			

			

				

					weixin_30634661的博客
				

				

					08-14
					
					92
					
				

			

		

		

			
				
h5+canvas绘制动画时钟
效果图,这个是截图,可以动的,

代码如下:
<!DOCTYPE html><html><head><title>动画效果</title></head>
<body>	<canvas id="anm" width="600" height="600" style="b...

			
		

	





	

		

			

				
					
H5新特性：canvas学习1

				
			

			

				

					m0_48674847的博客
				

				

					07-19
					
					382
					
				

			

		

		

			
				
前端H5新特性：canvas学习。

			
		

	





	

		

			

				
					
h5、css3基础

				
			

			

				

					weixin_30325487的博客
				

				

					02-24
					
					99
					
				

			

		

		

			
				
一、html(超文本标记语言)


作用：实现页面布局


页面由许多标记符号组成


由浏览器解释执行
二、html主题创建方式


!(英文状态)+tab


html：4s+tab


html:5+tab
三、标签

在html页面中用尖括号括起来的叫做标签（标记符号）




分类


双标签：成对出现的标签。html b...

			
		

	





	

		

			

				
					
前端基础知识总结---CSS篇

				
			

			

				

					Web前端开发工程师
				

				

					09-09
					
					2601
					
				

			

		

		

			
				
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！
目录

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
2.CSS 选择符有哪些？
3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。
4.伪类与伪元素的区别
5.CSS 中哪些属性可以继承？
6.CSS 优先级算法如何计算？
7.关于伪类 LVHA 的解释?
8.CSS3 新增伪类有那些？
9.如何居中 div？
10.disp

			
		

	





	

		

			

				
					
第一章 面试题基础篇（HTML+CSS）

				
			

			

				

					欢迎来到我的博客！
				

				

					08-09
					
					2057
					
				

			

		

		

			
				
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/reset.css 		是一个css文件，用来重置css样式的。normalize.css 	为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。

			
		

	





	

		

			

				
					
一篇博文带你0基础 Html和css入门

				
			

			

				

					贪吃ღ大魔王
				

				

					05-28
					
					1058
					
				

			

		

		

			
				
前端初学入门，找不到学习方向，不喜欢记笔记？没关系，这篇博文为你整理了详细的学习笔记汇总，欢迎收藏，喜欢的可以直接到博文尾处，免费下载md笔记哦~⭐⭐⭐



# Html5
网站:
1、网站的建立流程????

注册域名
租用空间
网站建设



确定网站的主题
搜索资料
规划网站
制作页面


4.网站的推广
5.网站的维护
2、网页的组成及web标准????

结构：网页的结构部分 xhtml或html
表现：网页的样式css
行为：网页要实现的功能JS

HTML  超文本标记语言
XHTML 可扩

			
		

	





	

		

			

				
					
【playwright】 page.get_by_类型方法

				
			

			

				

					qadnkz的专栏
				

				

					04-25
					
					640
					
				

			

		

		

			
				
在 Playwright 中，系列方法提供了一种更语义化、更直观的方式来定位页面上的元素。这些方法基于 HTML 的语义属性（如rolelabel等）或特定的 DOM 属性，能够帮助你更轻松地编写可读性高的测试代码。以下是 Playwright 提供的所有get_by_*

			
		

	





	

		

			

				
					
vue项目前后端分离设计

				
			

			

				

					爱分享的程序员
				

				

					04-25
					
					1469
					
				

			

		

		

			
				
在Vue前端架构中，通过分层结构和模块化设计实现高效的前后端分离，需要系统性规划各层职责、接口管理和数据流控制。以下是结合业界最佳实践的完整方案：

			
		

	





	

		

			

				
					
Vue2、Vue3区别之响应式原理

				
			

			

				

					2203_75479159的博客
				

				

					04-27
					
					992
					
				

			

		

		

			
				
工作原理：通过遍历数据对象的每个属性，使用Object.defineProperty来定义getter和setter。当数据被访问时，收集依赖；当数据变化时，触发更新。但这种方法有一些限制，比如无法检测到对象属性的添加或删除，需要借助Vue.set或Vue.delete方法。对于数组，Vue 2需要重写数组的方法（如push、pop等）来触发更新，而不能直接通过索引设置元素或修改长度。实现步骤：Object.defineProperty()语法


代码示例：


2. 局限性


无法检测动态属性：

解

			
		

	





	

		

			

				
					
Rollup、Webpack、Esbuild 和 Vite 前端打包工具

				
			

			

				

					weixin_42283818的博客
				

				

					04-27
					
					973
					
				

			

		

		

			
				
Rollup、Webpack、Esbuild 和 Vite 都是前端开发中常用的打包工具，它们各有特点，以下是对它们的详细对比：

			
		

	





	

		

			

				
					
Springboot 手搓 后端 滑块验证码生成

				
			

			

				

					qq_50909707的博客
				

				

					04-25
					
					633
					
				

			

		

		

			
				
2、验证码生成服务，生成唯一的标识uuid（可考虑雪花算法生成），将生成图片生成后得到的位置信息即x（非登高拼图x和y）记录到缓存中，建议使用redis存储，即使分布式也能使用；1、后端需要生成对应的两个图片（拼图图片和拼图背景图片，图片内存尽量小一点）和对应位置（x和y, 等高拼图只需要记录x即可）；通过 圆的标准方程 (x-a)²+(y-b)²=r²,标识圆心（a,b）,半径为r的圆，>=的在外侧，<的内侧。接下来继续手搓旋转验证码前后端。

			
		

	





	

		

			

				
					
WebXR教学 06 项目4 跳跃小游戏

					
最新发布

				
			

			

				

					teacherchen90的博客
				

				

					04-28
					
					232
					
				

			

		

		

			
				
【代码】WebXR教学 06 项目4 跳跃小游戏。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
gCodeTop  格码拓普 老师

			
您的鼓励.我的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值