入门createjs———easelJS教程(1)绘制一个圆形

最新推荐文章于 2022-09-05 20:43:51 发布
最新推荐文章于 2022-09-05 20:43:51 发布
阅读量3.4k 收藏 1
点赞数
分类专栏： EaselJS 文章标签： canvas html createJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StarsInSun/article/details/41344251
版权

文档的初始化


<!DOCTYPE html>
<html>
<head>
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script><pre name="code" class="html">    //引入easeljs
    <script>
        function init() {
            // 下面我们将插入操作画布的JS代码
        }
    </script>
</head>
<body onLoad="init();">
    <canvas id="demoCanvas" width="500" height="300">
      
    </canvas>
</body>
</html>
 

 

canvas标记在第12行有一个id,这样我们很容易可以引用,以及定义的宽度和高度。重要的是要理解,这里的宽度和高度属性设置画布的像素尺寸。
 

如果你动态改变CSS的宽度和高度,将规模画布和图形可能会模糊或粗糙。
 

 

创建图形
 

 

创建图形的首先我门得 创建一个舞台，所有的图形都在 上面绘制。（和FLASH的舞台差不多）
 

 

var stage = new createjs.Stage("demoCanvas");

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  StarsInSun
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
CreateJS 绘制图形2

				
			

			

				

					小芽教程
				

				

					05-13
					
					3572
					
				

			

		

		

			
				
个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf 
      QQ:909648986


EaselJS 绘制图形2


本节将介绍使用Shape对象,绘制椭圆,绘制星形,绘制复杂的带圆角矩形,创造渐变效果,用图片填充绘图.


例子1 绘制椭圆



	
	


	
		你的浏览器不支持canvas标签
	
	
		var 

			
		

	



                

              
                



	

		

			

				
					
createjs 绘制圆形图片

				
			

			

				

					weixin_30432007的博客
				

				

					09-08
					
					313
					
				

			

		

		

			
				
由于之前做移动端h5 打印图片都是用html2canvas ,但是遇到比较多坑所以想转换用createjs直接绘制。
在createjs里，想实现比较基础的圆形图片，简单来说就是把图片放在一个圆形范围里面，超出圆形部分隐藏。
用到的属性:mask
效果图：

代码片段：

//创建图形
        var bitmap1 = new createjs.Bitmap(q...

			
		

	



                


  
              

                


	

		

			

				
					
html拖动圆纽改变,绘制一个可拖动的圆圈，其中心信息使用easeljs动态更改 - html5代码 - 源码查...

				
			

			

				

					weixin_35896299的博客
				

				

					06-26
					
					146
					
				

			

		

		

			
				
问题I am trying to display co-ordinate of the circle that is created with double click within the canvas. I could do this task but when I drag the circle the want the co-ordinate information to be chang...

			
		

	





	

		

			

				
					
[HTML5].Canvas.easel.js.arc.arcTo 绘制弧线

				
			

			

				

					KeyGen的专栏
				

				

					11-12
					
					2219
					
				

			

		

		

			
				
easeljs的arcTo参数说明：
Graphics.ArcTo (

    x1 y1 x2 y2 radius 

)

Defined in Graphics.ArcTo:1684
Parameters:

    x1 Number
    y1 Number
    x2 Number
    y2 Number
    radius Number

			
		

	



		

			
		



	

		

			

				
					
CreateJS第1章 EaselJS基础 （画图）

				
			

			

				

					weixin_30252709的博客
				

				

					04-18
					
					244
					
				

			

		

		

			
				
这章学学EaselJS的基本常用API首先下载createjs库，在项目文件里新建一个js文件夹放里面http://code.createjs.com/
各种形状

var sp = new createjs.Shape();
sp.graphics.f("red").dc(100,100,80);//画圆
//sp.graphics.beginFill("red").draw...

			
		

	





	

		

			

				
					
easelSif:用于 createjs.Easeljs 的 html5 Synfig 播放器

				
			

			

				

					06-20
				

			

		

		

			
				
是一个使用加载 、显示和动画压缩的 sif 文件的库。  全部在 MIT 许可下发布。  生成的对象是easeljs的Container对象，所有层都是easeljs对象。  这不是完整的未来。 它支持的层类型：   Group layer (Container) ...

			
		

	





	

		

			

				
					
HTML5 开发框架CreateJS EaselJS-release_v0.7.1.zip

				
			

			

				

					10-07
				

			

		

		

			
				
EaselJS是一个基于HTML5 Canvas的JavaScript库，它的设计目的是简化与Canvas元素的交互，提供一套丰富的API来处理图形绘制、事件处理、动画制作等任务。这个框架的核心在于它提供了一个舞台（Stage）对象，可以将...

			
		

	





	

		

			

				
					
一个介绍端午节的H5网页made with createjs

				
			

			

				

					06-04
				

			

		

		

			
				
为了更好地展示这一古老节日的风采，我们利用CreateJS创建了一个互动式的H5网页。该网页通过生动的动画、精美的图片和丰富的互动功能，向用户全面介绍端午节的历史、习俗和文化内涵。  ### 页面结构与设计  #### ...

			
		

	





	

		

			

				
					
一个端午节接粽子的小游戏 made with createjs

					
最新发布

				
			

			

				

					06-13
				

			

		

		

			
				
EaselJS提供了一个强大的2D绘图API，允许开发者在canvas上绘制图形、文本、图片等元素。在这个接粽子游戏中，我们可以利用EaselJS创建粽子的图像，设置其位置、大小和动画效果，使其看起来像是从屏幕上方掉落下来。 ...

			
		

	





	

		

			

				
					
CreateJs系列教程之 EaselJs_3_绘制移动矩形（Shape）

				
			

			

				

					weixin_34054931的博客
				

				

					11-12
					
					582
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
LyndaEaselJS:Lynda.com EaselJS教程

				
			

			

				

					05-19
				

			

		

		

			
				
LyndaEaselJS
 下次继续此处：完成

			
		

	





	

		

			

				
					
createjs基础入门

				
			

			

				

					weixin_29947843的博客
				

				

					05-02
					
					1189
					
				

			

		

		

			
				
EaselJS创建图形
var stage = new createjs.Stage("demoCanvas");

var circle = new createjs.Shape();

circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,5);

circle.x = 100;

circle.y = 100;

stage.addChild(circle);

stage.update();

EaselJS创建文字
var stage = 

			
		

	





	

		

			

				
					
使用 JavaScript 绘制圆

				
			

			

				

					m0_63639281的博客
				

				

					09-05
					
					3951
					
				

			

		

		

			
				
使用 JavaScript 绘制圆

			
		

	





	

		

			

				
					
CreateJS 绘制图形1

				
			

			

				

					小芽教程
				

				

					05-12
					
					8355
					
				

			

		

		

			
				
个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf 
      QQ:909648986


EaselJS 绘制图形1


本节将介绍使用Shape对象,绘制矩形,绘制圆形,画线,绘制贝塞尔曲线,绘制带圆角的矩形.


例子1 绘制矩形



	
	


	
		你的浏览器不支持canvas标签
	
	
		var myCanv

			
		

	





	

		

			

				
					
EaselJS简明教程1-绘图

				
			

			

				

					webdev
				

				

					02-13
					
					350
					
				

			

		

		

			
				
1.引言
EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。
大家可以到官方网站了解js库的最新进展，也可以使用官方的DEMO和教程进行学习。
为了便于大家学习，结合官方教程和官方DEMO我们来写一个简明教程，主要是对自己的学习做个梳理，也希望对大家有所帮助。好...

			
		

	





	

		

			

				
					
createjs之easeljs【画一个红色矩形】

				
			

			

				

					章鱼小丸子
				

				

					03-01
					
					2199
					
				

			

		

		

			
				
script src="easeljs-0.8.0.min.js">script> 引入easeljs文件


canvas id="gameView" width="400px" height="=400px">canvas>
script src="app.js">script>由于easeljs是对canvas进行封装的，所以先建立一个canvas标签，设置它的大小，id。
引入将要

			
		

	





	

		

			

				
					
EaselJS简明教程2-动画

				
			

			

				

					webdev
				

				

					02-15
					
					207
					
				

			

		

		

			
				
EaselJS简明教程系列第二部分，今天主要看看动画的实现，没有看过第一部分的可以看看教程1绘图。
动画是将静止的画面变为动态的艺术，由静止到动态的实现，主要依靠人眼的视觉残留效应。
动画可以分为逐帧动画和补间动画两种，逐帧动画把动画（例如人物动作）进行分解，然后绘制出连续的、具有代表性的动作，连续播放形成动画，逐帧动画适用于复杂的不连续的动画。
补间动画，指我们给定动作的初始状态和结束状态...

			
		

	





	

		

			

				
					
显卡支持html5,教你入门EaselJS做HTML5[转载]

				
			

			

				

					weixin_34379710的博客
				

				

					06-19
					
					150
					
				

			

		

		

			
				
你是否正在寻找关于easeljs的内容？让我把最宝贵的东西奉献给你：今天借由easeljs这个脚本库，写一个简单的给大家当做为示范。DEMO演示链接这个demo的最终效果是游戏割绳子(Cut the Rope)中的小青蛙的表情。首先简单介绍一下easeljs这个脚本库，它是我最近发现的一个用来绘制Canvas的脚本库，比起Canvas的底层API，这个脚本库的接口设计更简单易用，所以做起来就易如反...

			
		

	





	

		

			

				
					
使用CreateJS开发HTML5游戏入门指南

				
			

			

				

					
				

			

		

		

			
				
1. **了解CreateJS** (Chapter 1): CreateJS是一个开源的JavaScript库集合，用于创建交互式的HTML5内容，包括EaselJS、TweenJS、SoundJS和PreloadJS等组件。这一章会介绍CreateJS的核心概念，它的架构以及如何在项目...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值