<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(0, 0, 1000, 800);
context.fillStyle = 'rgb(116, 200, 226)';
context.fill();
context.beginPath();
context.arc(400, 225, 130, 0 , 2*Math.PI, false);
context.fillStyle = 'rgb(249, 199, 236)';
context.fill();
context.beginPath();
context.moveTo(300, 300);
context.lineTo(500, 300);
context.lineTo(400, 500);
context.lineTo(300, 300);
context.closePath();
context.lineWidth = 20;
context.fillStyle = 'rgb(229, 202, 154)';
context.fill();
context.strokeStyle = 'rgb(230, 200, 150)';
context.stroke();
context.beginPath();
context.moveTo(325, 200);
context.lineTo(350, 175);
context.lineWidth = 10;
context.strokeStyle = 'rgb(250, 0, 0)';
context.stroke();
context.beginPath();
context.moveTo(375, 250);
context.lineTo(400, 275);
context.lineWidth = 10;
context.strokeStyle = 'rgb(50, 250, 50)';
context.stroke();
context.beginPath();
context.moveTo(475, 220);
context.lineTo(500, 200);
context.lineWidth = 10;
context.strokeStyle = 'rgb(75, 75, 200)';
context.stroke();
context.beginPath();
context.moveTo(390, 150);
context.lineTo(430, 170);
context.lineWidth = 10;
context.strokeStyle = 'rgb(225, 225, 0)';
context.stroke();
context.beginPath();
context.moveTo(450, 260);
context.lineTo(470, 285);
context.lineWidth = 10;
context.strokeStyle = 'rgb(250, 0, 0)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment