This post explains how to create TRIANGLES in HTML.
TEXT BELOW = A SINGLE PIXEL LINE THAT FORMS A TRIANGLE
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 200;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x, y)
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = A SINGLE LINE THAT FORMS A TRIANGLE WITH A COLOR FILL WITH A BLACK STROKE
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 200;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x, y)
context.fillStyle = "green";
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = A SINGLE LINE THAT FORMS A TRIANGLE WITH A COLOR FILL WITH A GREEN STROKE
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 200;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x, y)
context.fillStyle = "green";
context.fill();
context.strokeStyle = "green";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
TEXT BELOW = ALTERNATE CODE THAT FORMS A TRIANGLE WITH A PINK FILL AND STROKE
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// Set the style properties.
context.fillStyle = '#FF66CC';
context.strokeStyle = '#FF66CC';
context.lineWidth = 0;
context.beginPath();
// Start from the far-left point.
context.moveTo(300, 300); // give the (x, y) coordinates
context.lineTo(600, 300);
context.lineTo(450, 150);
context.lineTo(300, 300);
//
context.fill();
context.stroke();'#FF66CC';
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
......... DO NOT COPY THESE DOTS
TEXT BELOW = ALTERNATE CODE THAT FORMS TWO TRIANGLES IN THE SHAPE OF A BOWTIE
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// right side of bow ˇˇˇˇˇˇˇˇˇˇ
// Set the style properties.
context.fillStyle = '#FF66CC';
context.strokeStyle = '#00FF00';
context.lineWidth = 0;
context.beginPath();
// Start from the far-left point.
context.moveTo(300, 300); // give the (x, y) coordinates
context.lineTo(450, 450);
context.lineTo(450, 150);
context.lineTo(300, 300);
//
context.fill();
context.stroke();'#00FF00';
context.closePath();
////////////////////////////////////// left side of bow ˇˇˇˇˇˇˇˇˇˇ
// Set the style properties.
context.fillStyle = '#FF66CC';
context.strokeStyle = '#00FF00';
context.lineWidth = 0;
context.beginPath();
// Start from the far-left point.
context.moveTo(300, 300); // give the (x, y) coordinates
context.lineTo(150, 450);
context.lineTo(150, 150);
context.lineTo(300, 300);
//
context.fill();
context.stroke();'#00FF00';
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS
No comments:
Post a Comment