DojoTutorial 第一个Dojo示例（图形）

Dojo Tutorial:第一个Dojo示例（图形） Dojo是一个强大的JavaScript工具包，用于构建富互联网应用程序（RIA）。它以其模块化、高性能和可扩展性受到开发者的欢迎。在这个教程中，我们将深入理解如何使用Dojo来创建简单的图形。Dojo基于CommonJS规范，采用AMD模块加载机制，提供了强大的DI系统便于组件协作。在本例中，我们主要关注dojo/on和dojo/dom-geometry模块。dojo/on用于事件处理，dojo/dom-geometry用于操作DOM元素几何属性。以下是示例代码：

1. 事件处理（dojo/on）

require(['dojo/on', 'dojo/dom'], function(on, dom) {

 var element = dom.byId('myElement');

 on(element, 'click', function(event) {

 console.log('Element was clicked!');

 });

});

1. DOM几何属性（dojo/dom-geometry）

require(['dojo/dom-geometry'], function(domGeom) {

 var canvas = dom.byId('myCanvas');

 var box = domGeom.position(canvas);

 // 使用box.x, box.y, box.w, box.h为图形定位

});

1. 创建图形

通过元素和CanvasRenderingContext2D API进行绘图：

require(['dojo/dom', 'dojo/on'], function(dom, on) {

 var canvas = dom.byId('myCanvas');

 var context = canvas.getContext('2d');

 context.fillStyle = 'red';

 context.fillRect(50, 100, 100);

});

1. Dojo的动画和效果

Dojo的dojo/fx模块提供丰富的动画和效果，适用于图形交互中的动画过渡。