mirror of
https://github.com/servo/servo.git
synced 2025-06-27 02:23:41 +01:00
32 lines
834 B
HTML
32 lines
834 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<canvas id ="one" width="100" height="100"></canvas>
|
|
<canvas id ="two" width="100" height="100"></canvas>
|
|
<script>
|
|
function drawCircle(ctx, geom) {
|
|
ctx.fillStyle = 'green';
|
|
ctx.beginPath();
|
|
ctx.rect(0, 0, geom.width, geom.height);
|
|
ctx.fill();
|
|
}
|
|
|
|
var ctx1 = document.getElementById('one').getContext('2d');
|
|
drawCircle(ctx1, {width: 50, height: 50});
|
|
ctx1.translate(50, 0);
|
|
drawCircle(ctx1, {width: 50, height: 50});
|
|
ctx1.resetTransform();
|
|
ctx1.translate(0, 50);
|
|
drawCircle(ctx1, {width: 100, height: 50});
|
|
|
|
var ctx2 = document.getElementById('two').getContext('2d');
|
|
for (var i = 0; i < 5; i++) {
|
|
drawCircle(ctx2, {width: 50, height: 20});
|
|
ctx2.translate(0, 20);
|
|
}
|
|
ctx2.resetTransform();
|
|
ctx2.translate(50, 25);
|
|
drawCircle(ctx2, {width: 50, height: 50});
|
|
</script>
|
|
</body>
|
|
</html>
|