<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("NickCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
///Background
var x = 0;
var y = 0;
var width = 750;
var height = 550;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 13;
context.strokeStyle = 'rgb(128,128,128)';
context.stroke()
////Stick1
var x = 250;
var y = 75;
var x1 = 500;
var y1 = 450;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.strokeStyle = 'rgb(124,252,0)';
context.stroke();
context.beginPath();
context.rect(500, 450, 100, 25);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 13;
context.strokeStyle = 'rgb(0,255,255)';
context.stroke()
////Stick2
var x = 500;
var y = 75;
var x1 = 250;
var y1 = 450;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;
context.strokeStyle = 'rgb(47,79,79)';
context.stroke();
context.beginPath();
context.rect(150, 450, 100, 25);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 13;
context.strokeStyle = 'blue';
context.stroke()
////puck
var centerX = canvas.width / 2.15;
var centerY = canvas.height / 1.33;
var radius = 25;
var startangle = 0 * Math.PI;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 10;
context.strokeStyle = "white";
context.stroke();
//// MyInitials
context.beginPath();
context.moveTo(50, 100);
context.quadraticCurveTo(125, 15, 100, 100);
context.lineWidth = 10;
// line color
context.strokeStyle = "green";
context.stroke();
context.beginPath();
context.moveTo(170, 100);
context.quadraticCurveTo(100, 125, 145, 50);
context.lineWidth = 10;
// line color
context.strokeStyle = "white";
context.stroke();
/////Baseball
var centerX = canvas.width / 1.25;
var centerY = canvas.height / 5.7;
var radius = 60;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "white";
context.shadowBlur = 10;
context.shadowColor = "white";
context.stroke();
context.shadowBlur = 10;
context.shadowColor = "black";
context.beginPath();
context.moveTo(603, 150);
context.quadraticCurveTo(650, 110, 603, 60);
context.lineWidth = 4;
// line color
context.strokeStyle = "red";
context.stroke();
context.beginPath();
context.moveTo(676, 150);
context.quadraticCurveTo(630, 110, 676, 60);
context.lineWidth = 4;
// line color
context.strokeStyle = "red";
context.stroke();
////left seams
var x = 600;
var y = 80;
var x1 = 620;
var y1 = 60;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
var x = 610;
var y = 95;
var x1 = 630;
var y1 = 80;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
var x = 615;
var y = 115;
var x1 = 635;
var y1 = 115;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
var x = 610;
var y = 125;
var x1 = 630;
var y1 = 140;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
var x = 600;
var y = 135;
var x1 = 620;
var y1 = 155;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
/////right seams
var x = 645;
var y = 115;
var x1 = 666;
var y1 = 115;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
var x = 660;
var y = 60;
var x1 = 680;
var y1 = 80;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
var x = 650;
var y = 80;
var x1 = 670;
var y1 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
var x = 670;
var y = 125;
var x1 = 650;
var y1 = 140;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
var x = 680;
var y = 135;
var x1 = 660;
var y1 = 155;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
////cornertriangles
/////upperleft
var gradient = context.createLinearGradient (0, 0, 0, height);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "black");
context.shadowBlur = 10;
context.shadowColor = "white";
context.fillStyle = gradient;
context.strokeStyle = 'black';
context.lineWidth = 4;
context.beginPath();
context.moveTo(10, 10);
context.lineTo(50, 10);
context.lineTo(10, 50);
context.lineTo(10, 10);
context.fill();
context.stroke();
context.closePath();
////lowerleft
var gradient = context.createLinearGradient (0, 0, 0, height);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "green");
context.shadowBlur = 10;
context.shadowColor = "white";
context.fillStyle = gradient;
context.strokeStyle = 'black';
context.lineWidth = 4;
context.beginPath();
context.moveTo(10, 540);
context.lineTo(50, 540);
context.lineTo(10, 500);
context.lineTo(10, 540);
context.fill();
context.stroke();
context.closePath();
////lowerright
var gradient = context.createLinearGradient (0, 0, 0, height);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "blue");
context.shadowBlur = 10;
context.shadowColor = "white";
context.fillStyle = gradient;
context.strokeStyle = 'black';
context.lineWidth = 4;
context.beginPath();
context.moveTo(740, 540);
context.lineTo(700, 540);
context.lineTo(740, 500);
context.lineTo(740, 540);
context.fill();
context.stroke();
context.closePath();
////upperright
var gradient = context.createLinearGradient (0, 0, 0, height);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "black");
context.shadowBlur = 10;
context.shadowColor = "white";
context.fillStyle = gradient;
context.strokeStyle = 'black';
context.lineWidth = 4;
context.beginPath();
context.moveTo(740, 10);
context.lineTo(700, 10);
context.lineTo(740, 50);
context.lineTo(740, 10);
context.fill();
context.stroke();
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="NickCanvas" width="800" height="600"></canvas>
</body>
</html> <
No comments:
Post a Comment