<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> ARROW </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
// BACKGROUND
var yippee = context.createLinearGradient(0,0, canvas.width, canvas.height);
yippee.addColorStop(0,"grey");
yippee.addColorStop(0.25,"maroon");
yippee.addColorStop(0.5,"gold");
yippee.addColorStop(0.75,"maroon");
yippee.addColorStop(1,"grey");
context.beginPath();
context.rect(0,0, canvas.width, canvas.height);
context.fillStyle = yippee;
context.fill();
context.closePath();
///ARROW TRIANGLE
context.beginPath();
context.moveTo(100,100);
context.lineTo(160,100);
context.lineTo(100,160);
context.lineTo(100,100);
context.lineWidth = 10;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();
//STEM OF ARROW
context.beginPath();
context.moveTo(130,130);
context.lineTo(260,260);
context.lineWidth = 10;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();
//FIRST END
context.beginPath();
context.moveTo(260,260);
context.lineTo(300,260);
context.lineTo(320,280);
context.lineTo(280,280);
context.lineTo(280,320);
context.lineTo(260,300);
context.lineTo(260,260);
context.lineWidth = 5;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();
///SECOND END
context.beginPath();
context.moveTo(290,290);
context.lineTo(330,290);
context.lineTo(350,310);
context.lineTo(310,310);
context.lineTo(310,350);
context.lineTo(290,330);
context.lineTo(290,290);
context.lineWidth = 5;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();
/// SECOND ARROW
///ARROW TRIANGLE
context.beginPath();
context.moveTo(300,100);
context.lineTo(300,160);
context.lineTo(240,100);
context.lineTo(300,100);
context.lineWidth = 10;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();
//STEM OF ARROW
context.beginPath();
context.moveTo(270,130);
context.lineTo(140,260);
context.lineWidth = 10;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();
//FIRST END
context.beginPath();
context.moveTo(140,260);
context.lineTo(140,300);
context.lineTo(120,320);
context.lineTo(120,280);
context.lineTo(80,280);
context.lineTo(100,260);
context.lineTo(140,260);
context.lineWidth = 5;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();
///SECOND END
context.beginPath();
context.moveTo(110,290);
context.lineTo(110,330);
context.lineTo(90,350);
context.lineTo(90,310);
context.lineTo(50,310);
context.lineTo(70,290);
context.lineTo(110,290);
context.lineWidth = 5;
context.lineCap = "square";
context.lineJoin = "miter";
context.fillStyle = "white";
context.strokeStyle ="white";
context.fill();
context.stroke();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
No comments:
Post a Comment