JavaScript Tutorial/Dojo toolkit/Canvas Draw
Содержание
Create Ellipse
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojox.gfx"); function testIt() { var s = dojox.gfx.createSurface("my", 320, 240); s.createEllipse({ cx : 160, cy : 190, rx : 30, ry : 40 }).setFill([0, 255, 0, 0.5]); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Draw 3D ball
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojox.gfx"); function testIt() { var s = dojox.gfx.createSurface("my", 320, 240); s.createCircle({ cx : 265, cy : 120, r : 40}).setFill(dojo.mixin( { type : "radial", cx : 250, cy : 90}, { colors: [ { offset: 0, color: [255, 0, 0, 0] }, { offset: 0.5, color: "red" }, { offset: 1, color: [0, 0, 255, 0] } ]} )); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Draw line
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojox.gfx"); function testIt() { var s = dojox.gfx.createSurface("my", 320, 240); s.createLine({x1:10,y1:10, x2:310,y2:230}).setStroke({color : "#ff0000"}); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Draw polygon
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojox.gfx"); function testIt() { var s = dojox.gfx.createSurface("my", 320, 240); s.createPolyline([ {x:160,y:15}, {x:10,y:5},{x:210,y:65}, {x:160,y:15} ]).setFill([255, 0, 0, 1]); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Draw rectangle
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojox.gfx"); function testIt() { var s = dojox.gfx.createSurface("my", 320, 240); s.createRect({ x : 15, y : 80, width : 60, height : 80}).setStroke({color : "red"}); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Draw stroke
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojox.gfx"); function testIt() { var s = dojox.gfx.createSurface("my", 320, 240); var txt = s.createText({x: 90, y: 130, text: "Text"}); txt.setFont({family : "Times", size : "20pt", weight : "bold"}); txt.setFill("yellow"); txt.setStroke("red"); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Draw text
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojox.gfx"); function testIt() { var s = dojox.gfx.createSurface("my", 320, 240); var txt = s.createText({x: 90, y: 130, text: "Text"}); txt.setFont({family : "Times", size : "20pt", weight : "bold"}); txt.setStroke("black"); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Fill text
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojox.gfx"); function testIt() { var s = dojox.gfx.createSurface("my", 320, 240); var txt = s.createText({x: 90, y: 130, text: "Text"}); txt.setFont({family : "Times", size : "20pt", weight : "bold"}); txt.setFill("yellow"); txt.setStroke("red"); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>
Shape rotation
<source lang="javascript">
<html>
<head> <script type="text/javascript"> var djConfig = { baseScriptUri : "js/dojo/", parseOnLoad : true }; </script> <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> <script> dojo.require("dojox.gfx"); function testIt() { var s = dojox.gfx.createSurface("my", 320, 240); var t = s.createPolyline([ {x:160,y:15}, {x:110,y:65},{x:210,y:65}, {x:160,y:15} ]).setFill([0, 255, 0, 1]); window.setInterval(function() { t.applyTransform(dojox.gfx.matrix.rotategAt(5, 155, 50)); }, 100); } </script> </head> <body onLoad="testIt();">
</body>
</html></source>