x/box-o-sand
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Circle time, plus a smidge of refactoring

Browse Source
This commit is contained in:
Dan Buch 2013-02-10 22:18:56 -05:00
parent fa93122685
commit 6a792dc2a3
1 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
html5/canvas/mdn-tutorial.html
View File

@ -9,32 +9,35 @@
</style>
</head>
<body>
<canvas id="tutorial0" width="150" height="150"></canvas>
<canvas id="tutorial1" width="150" height="150"></canvas>
<canvas id="tutorial2" width="150" height="150"></canvas>
<canvas id="tutorial3" width="150" height="150"></canvas>
<canvas id="tut0" width="150" height="150"></canvas>
<canvas id="tut1" width="150" height="150"></canvas>
<canvas id="tut2" width="150" height="150"></canvas>
<canvas id="tut3" width="150" height="150"></canvas>
<canvas id="tut4" width="150" height="200"></canvas>
<script type="text/javascript">
function draw0() {
var ctx = document.getElementById('tutorial0').getContext('2d');
var drawings = {};
drawings.draw0 = function () {
var ctx = document.getElementById('tut0').getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 55, 50);
}
};
function draw1() {
var ctx = document.getElementById('tutorial1').getContext('2d');
drawings.draw1 = function() {
var ctx = document.getElementById('tut1').getContext('2d');
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
};
function draw2() {
var ctx = document.getElementById('tutorial2').getContext('2d');
drawings.draw2 = function() {
var ctx = document.getElementById('tut2').getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI*2, true);
@ -45,10 +48,10 @@
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.stroke();
}
};
function draw3() {
var ctx = document.getElementById('tutorial3').getContext('2d');
drawings.draw3 = function() {
var ctx = document.getElementById('tut3').getContext('2d');
ctx.beginPath();
ctx.moveTo(25, 25);
@ -62,13 +65,37 @@
ctx.lineTo(45, 125);
ctx.closePath();
ctx.stroke();
}
};
drawings.draw4 = function() {
var ctx = document.getElementById('tut4').getContext('2d');
for(var i=0; i<4; i++) {
for(var j=0; j<3; j++) {
ctx.beginPath();
var x = 25+j*50,
y = 25+i*50,
radius = 20,
startAngle = 0,
endAngle = Math.PI+(Math.PI*j)/2,
anticlockwise = i%2==0 ? false : true;
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}
};
window.addEventListener('load', function() {
draw0();
draw1();
draw2();
draw3();
for(funcname in drawings) {
console.log("Calling %s", funcname);
drawings[funcname]();
}
}, false);
</script>
</body>