Canvas——认识CreateJs库

最新推荐文章于 2024-07-02 09:15:19 发布

唐小狼

最新推荐文章于 2024-07-02 09:15:19 发布

阅读量1.2k

点赞数

分类专栏： HTML5 前端工程师学习笔记

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/51371673

版权

前端工程师学习笔记同时被 2 个专栏收录

85 篇文章 0 订阅

订阅专栏

HTML5

20 篇文章 0 订阅

订阅专栏

1、CreateJs

A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.

简单认识实例：

 
 
  
  
   
   <!DOCTYPE html>
  
  
  
  
   
   <html lang="en">
  
  
  
  
   
   <head>
  
  
  
  
   
       <meta charset="UTF-8">
  
  
  
  
   
       <title>index1</title>
  
  
  
  
   
       <script src="app1.js"></script>
  
  
  
  
   
       <script src="easeljs-0.8.2.min.js"></script>
  
  
  
  
   
   </head>
  
  
  
  
   
   <body>
  
  
  
  
   
       <canvas id="canvas" width="500" height="500"></canvas>
  
  
  
  
   
   </body>
  
  
  
  
   
   </html>

app1.js

 
 
  
  
   
   var canvas;
  
  
  
  
   
   var stage;
  
  
  
  
   
   var text; 
  
  
  
  
   
   var count = 0;
  
  
  
  
   
   window.onload = function () {
  
  
  
  
   
       canvas = document.getElementById("canvas");
  
  
  
  
   
       stage = new createjs.Stage(canvas);
  
  
  
  
   
       text = new createjs.Text("number->","20px Arial", "#ff7700");
  
  
  
  
   
       stage.addChild(text);
  
  
  
  
   
       createjs.Ticker.setFPS(1); //一秒更新多少次的意思
  
  
  
  
   
       createjs.Ticker.addEventListener("tick",hadler);
  
  
  
  
   
   }
  
  
  
  
   
   function hadler(e) {
  
  
  
  
   
       count++;
  
  
  
  
   
       text.text = "number->"+count+"!";
  
  
  
  
   
       stage.update();
  
  
  
  
   
   }