<!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, 800, 600);
var grd = context.createLinearGradient(400, 0, 400, 600);
grd.addColorStop(0, 'rgb(0,96,183)');
grd.addColorStop(1, 'rgb(82,107,222)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(100,50);
context.quadraticCurveTo(75, 25, 100, 0);
context.lineTo(200,0);
context.quadraticCurveTo(225, 25, 200, 50);
context.lineTo(100,50);
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(400,150);
context.quadraticCurveTo(375, 125, 400, 100);
context.lineTo(500,100);
context.quadraticCurveTo(525, 125, 500, 150);
context.lineTo(400,150);
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(600,100);
context.quadraticCurveTo(575, 75, 600, 50);
context.lineTo(700,50);
context.quadraticCurveTo(725, 75, 700, 100);
context.lineTo(600,100);
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.rect(0,500,800,100);
context.fillStyle = 'rgb(206,154,90)'
context.fill();
context.stroke();
context.beginPath();
context.moveTo(0,500);
context.lineTo(800,500);
context.lineTo(800,525);
context.quadraticCurveTo(700, 550, 600, 525);
context.quadraticCurveTo(500, 550, 400, 525);
context.quadraticCurveTo(300, 550, 200, 525);
context.quadraticCurveTo(100, 550, 0, 525);
context.lineTo(0,500);
context.fillStyle = 'rgb(0,203,0)'
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(200,500);
context.lineTo(200,100);
context.quadraticCurveTo(300,0,400,100);
context.lineTo(400,500);
context.lineTo(200,500);
context.lineCap = 'round';
var grd = context.createLinearGradient(200, 300, 400, 300);
grd.addColorStop(0, 'rgb(112,177,209)');
grd.addColorStop(1, 'rgb(16,79,112)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(300,500);
context.lineTo(300,350);
context.quadraticCurveTo(400,250,500,350);
context.lineTo(500,500);
context.lineTo(300,500);
var grd = context.createLinearGradient(300, 400, 500, 400);
grd.addColorStop(0, 'rgb(112,177,209)');
grd.addColorStop(1, 'rgb(16,79,112)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(100,500);
context.lineTo(100,200);
context.quadraticCurveTo(200,100,300,200);
context.lineTo(300,500);
context.lineTo(100,500);
var grd = context.createLinearGradient(100, 300, 300, 300);
grd.addColorStop(0, 'rgb(112,177,209)');
grd.addColorStop(1, 'rgb(16,79,112)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.lineCap = 'round';
context.stroke();
context.beginPath();
context.moveTo(600,500);
context.quadraticCurveTo(550,475,600,450);
context.bezierCurveTo(600, 400, 700, 400, 700, 450);
context.quadraticCurveTo(750,475,700,500);
context.lineTo(600,500);
context.fillStyle = 'rgb(0,248,0)';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment