<!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 = 'white';
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.stroke();
context.beginPath();
context.rect(150, 450, 100, 25);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 13;
context.strokeStyle = 'white';
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.stroke();
context.beginPath();
context.rect(500, 450, 100, 25);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 13;
context.strokeStyle = 'white';
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 = "black";
context.stroke();
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();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="NickCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment