JavaScript Tutorial/Dojo toolkit/Canvas Draw
Содержание
Create Ellipse
<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();">
<div id="my"></div>
</body>
</html>
Draw 3D ball
<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();">
<div id="my"></div>
</body>
</html>
Draw line
<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();">
<div id="my"></div>
</body>
</html>
Draw polygon
<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();">
<div id="my"></div>
</body>
</html>
Draw rectangle
<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();">
<div id="my"></div>
</body>
</html>
Draw stroke
<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();">
<div id="my"></div>
</body>
</html>
Draw text
<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();">
<div id="my"></div>
</body>
</html>
Fill text
<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();">
<div id="my"></div>
</body>
</html>
Shape rotation
<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();">
<div id="my"></div>
</body>
</html>