ExtJS中运用HTML5 Canvas简单例子
在ExtJS的Panel组件上使用HTML5的Canvas对象画图
的简单例子，效果如下：
怎么运行源代码：
新建两个文件，分别命名为mydemo.html, mydemo.js以后，将对应的HTML源代码
与JavaScript代码copy到各自的文件中，在同一目录下使用Google Chrome浏览器
或者IE9.0打开html文件即可看到效果！
HTML的代码如下：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>Example</title>
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
- <link rel="stylesheet" type="text/css" href="../shared/example.css" />
- <script type="text/javascript" src="../../bootstrap.js"></script>
- <script language="javascript" src="mydemo.js"></script>
- </head>
- <body>
- <h1>ExtJS with HTML5 Demo</h1>
- <p>The js is not minified so it is readable. See <a href="mydemo.js">source code</a>.</p>
- <div id="my-demo"></div>
- </body>
- </html>
- /**
- * HTML5 Canvas Demo
- */
- // create namespace
- Ext.namespace('Test');
- // create application
- Test.app = function() {
- return {
- // public methods
- init: function() {
- var grid = new Ext.Panel({
- renderTo: 'my-demo',
- title:'Simple HTML5 Canvas Demo',
- bodyStyle: 'padding: 10px;',
- borders: true,
- plain: true,
- xtype: 'panel',
- width:400,
- height:400,
- html: '<canvas id="canvas" width="400" height="400"></canvas>'
- });
- }, // end of init
- onDraw: function() {
- this.canvas = document.getElementById('canvas');
- this.ctx = this.canvas.getContext("2d");
- // create a blank image data
- var canvas2Data = this.ctx.createImageData(this.canvas.width, this.canvas.height);
- for ( var x = 0; x < canvas2Data.width; x++) {
- for ( var y = 0; y < canvas2Data.height; y++) {
- // Index of the pixel in the array
- var idx = (x + y * canvas2Data.width) * 4;
- // assign gray scale value
- var distance = Math.sqrt((x - canvas2Data.width / 2) * (x - canvas2Data.width / 2) + (y - canvas2Data.height / 2) * (y - canvas2Data.height / 2));
- var cvalue = (128.0 + (128.0 * Math.sin(distance / 8.0)));
- canvas2Data.data[idx + 0] = cvalue; // Red channel
- canvas2Data.data[idx + 1] = cvalue; // Green channel
- canvas2Data.data[idx + 2] = cvalue; // Blue channel
- canvas2Data.data[idx + 3] = 255; // Alpha channel
- }
- }
- this.ctx.putImageData(canvas2Data, 0, 0); // at coords 0,0
- // draw author infomation
- this.ctx.fillStyle = "red";
- this.ctx.font = "24px Times New Roman";
- this.ctx.fillText("HTML5 Demo - by gloomyfish ", 50, 60);
- }
- };
- }();
- // end of app
- Ext.onReady(function(){
- Test.app.init();
- Test.app.onDraw()
- // alert('ext.onready')
- });
- // Ext.onReady(Test.app.init, Test.app);
相关推荐
nercon 2020-03-06
zsh 2020-03-01
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15