ExtJS中运用HTML5 Canvas简单例子


在ExtJS的Panel组件上使用HTML5的Canvas对象画图

的简单例子，效果如下：


怎么运行源代码：

新建两个文件，分别命名为mydemo.html, mydemo.js以后，将对应的HTML源代码

与JavaScript代码copy到各自的文件中，在同一目录下使用Google Chrome浏览器

或者IE9.0打开html文件即可看到效果！


HTML的代码如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
  5.     <title>Example</title>  
  6.     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />  
  7.     <link rel="stylesheet" type="text/css" href="../shared/example.css" />  
  8.     <script type="text/javascript" src="../../bootstrap.js"></script>  
  9.     <script language="javascript" src="mydemo.js"></script>  
  10. </head>  
  11. <body>  
  12.     <h1>ExtJS with HTML5 Demo</h1>   
  13.     <p>The js is not minified so it is readable. See <a href="mydemo.js">source code</a>.</p>   
  14.     <div id="my-demo"></div>  
  15. </body>  
  16. </html>  
ExtJS的代码如下：
  1. /** 
  2.  * HTML5 Canvas Demo 
  3.  */  
  4. // create namespace   
  5. Ext.namespace('Test');  
  6.    
  7. // create application   
  8. Test.app = function() {  
  9.   
  10.   return {  
  11.     // public methods   
  12.     init: function() {  
  13.         
  14.       
  15.     var grid = new Ext.Panel({  
  16.       renderTo: 'my-demo',  
  17.       title:'Simple HTML5 Canvas Demo',  
  18.       bodyStyle: 'padding: 10px;',  
  19.       borders: true,  
  20.       plain: true,  
  21.       xtype: 'panel',  
  22.       width:400,  
  23.       height:400,  
  24.       html: '<canvas id="canvas" width="400" height="400"></canvas>'  
  25.     });  
  26.     
  27.     }, // end of init   
  28.       
  29.   onDraw: function() {  
  30.         this.canvas = document.getElementById('canvas');  
  31.         this.ctx = this.canvas.getContext("2d");  
  32.   
  33.         // create a blank image data   
  34.         var canvas2Data = this.ctx.createImageData(this.canvas.width, this.canvas.height);  
  35.         for ( var x = 0; x < canvas2Data.width; x++) {  
  36.             for ( var y = 0; y < canvas2Data.height; y++) {  
  37.    
  38.                 // Index of the pixel in the array   
  39.                 var idx = (x + y * canvas2Data.width) * 4;  
  40.                   
  41.                 // assign gray scale value   
  42.                 var distance = Math.sqrt((x - canvas2Data.width / 2) * (x - canvas2Data.width / 2) + (y - canvas2Data.height / 2) * (y - canvas2Data.height / 2));  
  43.                 var cvalue = (128.0 + (128.0 * Math.sin(distance / 8.0)));  
  44.                 canvas2Data.data[idx + 0] = cvalue; // Red channel   
  45.                 canvas2Data.data[idx + 1] = cvalue; // Green channel   
  46.                 canvas2Data.data[idx + 2] = cvalue; // Blue channel   
  47.                 canvas2Data.data[idx + 3] = 255; // Alpha channel   
  48.             }  
  49.         }  
  50.         this.ctx.putImageData(canvas2Data, 0, 0); // at coords 0,0   
  51.           
  52.         // draw author infomation   
  53.         this.ctx.fillStyle = "red";  
  54.         this.ctx.font = "24px Times New Roman";  
  55.         this.ctx.fillText("HTML5 Demo - by gloomyfish ", 50, 60);    
  56.    
  57.   }  
  58.   };  
  59. }();   
  60. // end of app   
  61. Ext.onReady(function(){  
  62.     Test.app.init();  
  63.     Test.app.onDraw()  
  64.     // alert('ext.onready')   
  65. });  
  66. // Ext.onReady(Test.app.init, Test.app);  
一定要有ExtJS的库文件支持！！！

相关内容