<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var centerx = 400;
var centery = 300;
var radius = 300;
var startx = 80;
var starty = 50;
var startradius = 100;
var endx = 100;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'orange');
grd.addColorStop(1, 'rgba(200, 0, 0, .8)');
context.fillStyle = grd;
context.fill();
context.beginPath();
context.arc(450, 300, 70, 0, Math.PI, false);
context.closePath();
context.fillStyle = 'green';
context.fill();
var centerx = 425;
var centery = 265;
var radius = 55;
var startx = 80;
var starty = 50;
var startradius = 100;
var endx = 100;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
context.fillStyle = 'green';
context.fill();
var centerx = 430;
var centery = 140;
var radius = 9;
var startx = 80;
var starty = 50;
var startradius = 100;
var endx = 100;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
context.fillStyle = 'black';
context.fill();
var centerx = 400;
var centery = 140;
var radius = 9;
var startx = 80;
var starty = 50;
var startradius = 100;
var endx = 100;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.quadraticCurveTo(375, 200, 419, 190)
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(445, 240);
context.lineTo(550, 115);
context.lineWidth = 5;
context.strokeStyle = 'green';
context.stroke();
context.beginPath();
context.moveTo(425, 240);
context.lineTo(300, 180);
context.lineWidth = 5;
context.strokeStyle = 'green';
context.stroke();
context.beginPath();
context.moveTo(300, 300);
// line 1
context.lineTo(350, 350);
//quad curve
context.quadraticCurveTo(380, 335, 400, 300);
// line 2
context.lineTo(450, 375);
//bezier curve 1
context.quadraticCurveTo(470, 330, 525, 300);
//line 3
context.lineTo(540, 350);
//quad3
context.quadraticCurveTo(535, 400, 460, 500);
context.quadraticCurveTo(400, 510, 350, 500);
context.quadraticCurveTo(315, 500, 275, 450);
context.quadraticCurveTo(260, 400, 270, 350);
context.lineTo(300, 300);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 9;
context.strokeStyle = 'rgb(0, 240, 100)';
context.stroke();
var centerx = 312;
var centery = 400;
var radius = 10;
var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha". Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;
//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();
var centerx = 400;
var centery = 400;
var radius = 15;
var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha". Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;
//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();
var centerx = 434;
var centery = 434;
var radius = 9;
var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha". Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;
//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();
var centerx = 305;
var centery = 350;
var radius = 12;
var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha". Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;
//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();
var centerx = 360;
var centery = 450;
var radius = 9;
var startx = 350;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha". Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;
//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
context.stroke();
var centerx = 475;
var centery = 380;
var radius = 9;
var startx = 200;
var starty = 150;
var startradius = 100;
var endx = 250;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'green');
//rgba stands for "red, green, blue, alpha". Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;
//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
var centerx = 415;
var centery = 180;
var radius = 50;
var startx = 80;
var starty = 50;
var startradius = 100;
var endx = 100;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'rgba(0, 250, 50, .1)');
grd.addColorStop(1, 'rgba(0, 180, 0, .8)');
//rgba stands for "red, green, blue, alpha". Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;
//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
var centerx = 370;
var centery = 169;
var radius = 30;
var startx = 80;
var starty = 50;
var startradius = 100;
var endx = 100;
var endy = 150;
var endradius = 400;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(startx, starty, startradius, endx, endy, endradius);
grd.addColorStop(0, 'rgba(0, 250, 50, .8)');
grd.addColorStop(1, 'rgba(0, 180, 0, .9)');
//rgba stands for "red, green, blue, alpha". Alpha is the Opacity, between 0 and 1
context.fillStyle = grd;
//context.fillStyle = 'rgba(255, 0, 0, .25)';
context.fill();
//body
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment