Friday, May 6, 2016
Monday, April 4, 2016
Monday, March 28, 2016
Wednesday, March 23, 2016
Monday, March 21, 2016
HTML Coding
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0, 0, 500, 500);
var grd = context.createLinearGradient(0, 500, 500, 500);
grd.addColorStop(0, 'rgb(0, 0, 0)');
grd.addColorStop(0.2, 'rgb(75, 0, 130)');
grd.addColorStop(.65, 'rgb(186, 85, 211)');
grd.addColorStop(1, 'rgb(221, 160, 221)');
context.fillStyle = grd;
context.fill();
context.stroke();
//Long Rays
context.beginPath();
context.moveTo(320, 155);
context.quadraticCurveTo(330, 115, 295, 90);
context.quadraticCurveTo(260, 75, 275, 20);
context.quadraticCurveTo(245, 155, 325, 175);
context.closePath();
context.strokeStyle = 'rgb(255, 215, 0)';
context.fillStyle = 'rgb(255, 215, 0)';
context.fill();
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.moveTo(280, 180);
context.bezierCurveTo(275, 155, 280, 135, 250, 125);
context.quadraticCurveTo(175, 100, 200, 50);
context.quadraticCurveTo(150, 100, 205, 143);
context.bezierCurveTo(245, 160, 255, 190, 255, 200);
context.closePath();
context.strokeStyle = 'rgb(255, 215, 0)';
context.fillStyle = 'rgb(255, 215, 0)';
context.fill();
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.moveTo(255, 225);
context.quadraticCurveTo(190, 190, 145, 235);
context.quadraticCurveTo(125, 250, 85, 250);
context.quadraticCurveTo(235, 300, 280, 220);
context.closePath();
context.strokeStyle = 'rgb(255, 215, 0)';
context.fillStyle = 'rgb(255, 215, 0)';
context.fill();
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.moveTo(285, 275);
context.quadraticCurveTo(220, 275, 220, 340);
context.quadraticCurveTo(230, 375, 190, 400);
context.quadraticCurveTo(290, 400, 300, 285);
context.closePath();
context.strokeStyle = 'rgb(255, 215, 0)';
context.fillStyle = 'rgb(255, 215, 0)';
context.fill();
context.lineWidth = 1;
context.stroke();
//Short Rays
context.beginPath();
context.moveTo(297, 160);
context.lineTo(307, 138);
context.lineTo(323, 155);
context.lineWidth = 1;
context.strokeStyle = '#FF6633';
context.fillStyle = '#FF6633';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(285, 165);
context.lineTo(263, 160);
context.lineTo(265, 185);
context.lineWidth = 1;
context.strokeStyle = '#FF6633';
context.fillStyle = '#FF6633';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(260, 200);
context.lineTo(238, 210);
context.lineTo(258, 230);
context.lineWidth = 1;
context.strokeStyle = '#FF6633';
context.fillStyle = '#FF6633';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(260, 240);
context.lineTo(250, 265);
context.lineTo(270, 265);
context.lineWidth = 1;
context.strokeStyle = '#FF6633';
context.fillStyle = '#FF6633';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(285, 275);
context.lineTo(290, 300);
context.lineTo(310, 285);
context.lineWidth = 1;
context.strokeStyle = '#FF6633';
context.fillStyle = '#FF6633';
context.fill();
context.stroke();
//Sun Outline
context.beginPath();
context.arc(320, 220, 65, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 215, 0)';
context.fill();
context.lineWidth = 6;
context.strokeStyle = '#FFFFCC';
context.stroke();
//Moon Outline
context.beginPath();
context.moveTo(295, 280); //Only need the moveTo code once per shape.
context.bezierCurveTo(360, 280, 360, 150, 285, 165); //The end of your first curve is the start of your second curve or line
context.bezierCurveTo(416, 112.5, 416, 315, 295, 280);
context.closePath();
context.strokeStyle = 'rgba(65, 105, 225, 0.95)';
context.fillStyle = 'rgba(65, 105, 225, 1)';
context.fill();
context.lineWidth = 5;
context.stroke();
//Moon Details
context.beginPath();
context.moveTo(350, 200);
context.lineTo(335,225);
context.lineTo(350,225);
context.lineWidth = 1;
context.strokeStyle = '#4169E1';
context.fillStyle = '#4169E1';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(350, 210);
context.lineTo(354,205);
context.lineTo(358,210);
context.lineWidth = 2;
context.lineCap = "round";
context.strokeStyle = '#FFFFCC';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
Monday, February 29, 2016
Tuesday, February 23, 2016
Subscribe to:
Posts (Atom)