|
|
|
@ -12,6 +12,8 @@
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
function draw0() {
|
|
|
|
|
var ctx = document.getElementById('tutorial0').getContext('2d');
|
|
|
|
@ -45,10 +47,28 @@
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function draw3() {
|
|
|
|
|
var ctx = document.getElementById('tutorial3').getContext('2d');
|
|
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(25, 25);
|
|
|
|
|
ctx.lineTo(105, 25);
|
|
|
|
|
ctx.lineTo(25, 105);
|
|
|
|
|
ctx.fill();
|
|
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(125, 125);
|
|
|
|
|
ctx.lineTo(125, 45);
|
|
|
|
|
ctx.lineTo(45, 125);
|
|
|
|
|
ctx.closePath();
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener('load', function() {
|
|
|
|
|
draw0();
|
|
|
|
|
draw1();
|
|
|
|
|
draw2();
|
|
|
|
|
draw3();
|
|
|
|
|
}, false);
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|