<!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();
context.beginPath();
context.moveTo(50, 200);
context.quadraticCurveTo(200, 25, 100, 200);
context.lineWidth = 10;
// line color
context.strokeStyle = "white";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="NickCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment