入门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
					
					3570
					
				

			

		

		

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


EaselJS 绘制图形2


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


例子1 绘制椭圆



	
	


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

			
		

	



                

              
                



	

		

			

				
					
createjs 绘制圆形图片

				
			

			

				

					weixin_30432007的博客
				

				

					09-08
					
					311
					
				

			

		

		

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

代码片段：

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

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					weixin_35896299的博客
				

				

					06-26
					
					145
					
				

			

		

		

			
				
问题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
					
					2218
					
				

			

		

		

			
				
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
					
					241
					
				

			

		

		

			
				
这章学学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工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
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
					
					3943
					
				

			

		

		

			
				
使用 JavaScript 绘制圆

			
		

	





	

		

			

				
					
CreateJS 绘制图形1

				
			

			

				

					小芽教程
				

				

					05-12
					
					8353
					
				

			

		

		

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


EaselJS 绘制图形1


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


例子1 绘制矩形



	
	


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

			
		

	





	

		

			

				
					
createjs中的Graphics

				
			

			

				

					游戏设计
				

				

					12-29
					
					4406
					
				

			

		

		

			
				
createjs中的Graphics 和 flash ActionScript中的Graphics 基本类似 今天我们就来好好剖析一下它
先来看下Graphics的定义:
Graphics
 类包含一组可用来创建矢量形状的方法。 支持绘制的显示对象包括 Sprite 和 Shape 对象。 这些类中的每一个类都包括 graphics 属性，该属性是一个 Graphics 对象。 以下是为便于

			
		

	





	

		

			

				
					
drawCircle方法：绘制圆形

					
热门推荐

				
			

			

				

					让 学习 成为一种 习惯 ( 谭祖爱 & 技术博客 )
				

				

					12-22
					
					2万+
					
				

			

		

		

			
				
drawCircle方法：绘制圆形

【功能说明】该方法用于在画布上绘制圆形，通过指定圆形圆心的坐标和半径来实现。该方法是绘制圆形的主要方法，同时也可以通过设置画笔的空心效果来绘制空心的圆形。

【基本语法】public void drawCircle (float cx, float cy, float radius, Paint paint)

参数说明

cx：圆心的x坐标。

			
		

	





	

		

			

				
					
HTML5 canvas元素绘制三角形、矩形、圆形等基本图形

				
			

			

				

					qq_38830589的博客
				

				

					09-30
					
					1236
					
				

			

		

		

			
				
一、canvas元素 二、canvas基本使用1. 绘制线段2. 绘制三角形3. 绘制矩形

			
		

	





	

		

			

				
					
easelJS 初始入门 (creatjs)

				
			

			

				

					weixin_41796631的博客
				

				

					01-09
					
					1888
					
				

			

		

		

			
				
https://www.cnblogs.com/stono/p/5194417.html

			
		

	





	

		

			

				
					
JavaScript库EASELJS的第一眼映像(一)

				
			

			

				

					「行到水穷处,坐看云起时」
				

				

					11-13
					
					3952
					
				

			

		

		

			
				
本段教程来自于《LYNDA.COM.EASELJS.FIRST.LOOK》


EASELJS是一个JavaScript库，用于在HTML5提供的Canvas对象上绘制图形图像并提供了交互接口，easelJS的目标是成为Flash的替代品，由于其可绘制复杂的图形UI并提供交互接口，无需插件即可在浏览器中运行。下载地址：http://code.createjs.com/。


一个最简单

			
		

	





	

		

			

				
					
应用createjs库制作一个画画房间，可选颜色，有橡皮擦，画笔大小

				
			

			

				

					05-11
				

			

		

		

			
				
好的，下面是基于createjs库制作的画画房间代码，包括可选颜色、橡皮擦和画笔大小功能：

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>画画房间</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <div>
        <label>画笔颜色：</label>
        <select id="color">
            <option value="#000000">黑色</option>
            <option value="#ff0000">红色</option>
            <option value="#00ff00">绿色</option>
            <option value="#0000ff">蓝色</option>
            <option value="#ffff00">黄色</option>
        </select>
        <label>画笔大小：</label>
        <select id="size">
            <option value="5">小</option>
            <option value="10" selected>中</option>
            <option value="15">大</option>
        </select>
        <button id="eraser">橡皮擦</button>
        <button id="clear">清空</button>
    </div>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script>
        var stage, canvas, shape, color, size, eraser, clear;

        function init() {
            canvas = document.getElementById("canvas");
            stage = new createjs.Stage(canvas);
            shape = new createjs.Shape();
            stage.addChild(shape);

            color = document.getElementById("color");
            size = document.getElementById("size");
            eraser = document.getElementById("eraser");
            clear = document.getElementById("clear");

            stage.addEventListener("stagemousedown", handleMouseDown);
            stage.addEventListener("stagemousemove", handleMouseMove);
            stage.addEventListener("stagemouseup", handleMouseUp);

            eraser.addEventListener("click", function() {
                color.value = "#ffffff";
            });

            clear.addEventListener("click", function() {
                shape.graphics.clear();
                stage.update();
            });

            createjs.Ticker.addEventListener("tick", stage);
        }

        function handleMouseDown(event) {
            shape.graphics.setStrokeStyle(size.value, "round", "round")
                .beginStroke(color.value)
                .moveTo(stage.mouseX, stage.mouseY);
            stage.addEventListener("stagemousemove", handleMouseMove);
        }

        function handleMouseMove(event) {
            shape.graphics.lineTo(stage.mouseX, stage.mouseY);
            stage.update();
        }

        function handleMouseUp(event) {
            stage.removeEventListener("stagemousemove", handleMouseMove);
        }

        window.onload = function() {
            init();
        };
    </script>
</body>
</html>
```

代码中，我们创建了一个画布和一个`Shape`对象用于存储画画的图形。通过`select`元素和`button`元素实现了可选颜色、橡皮擦和清空功能。在`init()`函数中，我们初始化了画布和`Shape`对象，并添加了鼠标事件监听器。在鼠标按下时，我们开始绘制图形，并在移动鼠标时不断更新绘制的图形。在鼠标松开时，停止绘制图形。最后，通过`Ticker`对象来更新画布显示。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值