Advertisemen
Hey guys, In this short tutorial, I will be showing you guys how to create bezier curve using HTML and Javascript.
This is what we are going to create in this tutorial.
I have the codes below to create the shape, which have comments next to them to explain the some of the lines of code.
You can just copy and paste these codes and try in browser.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"></script>
<script>
window.onload = function()
{
drawCanvas('mainCanvas');
};
</script>
<script>
function drawCanvas(canvasId)
{
// Adding 2d context in canvas
var canvas = document.getElementById(canvasId);
var context = canvas.getContext('2d');
// Color Declarations
var strokeColor = 'rgba(0, 0, 0, 1)';
var fillColor = 'rgba(128, 128, 128, 1)';
// Bezier Drawing
context.beginPath(); // opening drawing path
context.moveTo(98.5, 36.5); // begining at that point moveTo(x, y)
context.bezierCurveTo(98.5, 36.5, 142.24, 18.75, 165.5, 43.5); // ** bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
context.bezierCurveTo(188.76, 68.25, 193.97, 83.67, 231.5, 88.5);
context.bezierCurveTo(269.03, 93.33, 257.86, 153.73, 234.5, 158.5);
context.bezierCurveTo(211.14, 163.27, 135.29, 184.74, 143.5, 135.5);
context.bezierCurveTo(151.71, 86.26, 173.35, 58.54, 147.5, 78.5);
context.bezierCurveTo(121.65, 98.46, 141.16, 123.32, 119.5, 141.5);
context.bezierCurveTo(97.84, 159.68, 36.18, 157.88, 40.5, 108.5);
context.bezierCurveTo(44.82, 59.12, 91.13, 101.88, 78.5, 70.5);
context.bezierCurveTo(65.87, 39.12, 98.5, 36.5, 98.5, 36.5);
context.closePath(); // closing drawing path
// filling the shape with color
context.fillStyle = fillColor;
context.fill();
// adding stroke in the shape
context.strokeStyle = strokeColor;
context.lineWidth = 1;
context.stroke();
}
</script>
</head>
<body>
<canvas id="mainCanvas" width="300" height="200"> <!-- Creating a canvas! -->
Your browser doesn't support canvas property
</canvas>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"></script>
<script>
window.onload = function()
{
drawCanvas('mainCanvas');
};
</script>
<script>
function drawCanvas(canvasId)
{
// Adding 2d context in canvas
var canvas = document.getElementById(canvasId);
var context = canvas.getContext('2d');
// Color Declarations
var strokeColor = 'rgba(0, 0, 0, 1)';
var fillColor = 'rgba(128, 128, 128, 1)';
// Bezier Drawing
context.beginPath(); // opening drawing path
context.moveTo(98.5, 36.5); // begining at that point moveTo(x, y)
context.bezierCurveTo(98.5, 36.5, 142.24, 18.75, 165.5, 43.5); // ** bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
context.bezierCurveTo(188.76, 68.25, 193.97, 83.67, 231.5, 88.5);
context.bezierCurveTo(269.03, 93.33, 257.86, 153.73, 234.5, 158.5);
context.bezierCurveTo(211.14, 163.27, 135.29, 184.74, 143.5, 135.5);
context.bezierCurveTo(151.71, 86.26, 173.35, 58.54, 147.5, 78.5);
context.bezierCurveTo(121.65, 98.46, 141.16, 123.32, 119.5, 141.5);
context.bezierCurveTo(97.84, 159.68, 36.18, 157.88, 40.5, 108.5);
context.bezierCurveTo(44.82, 59.12, 91.13, 101.88, 78.5, 70.5);
context.bezierCurveTo(65.87, 39.12, 98.5, 36.5, 98.5, 36.5);
context.closePath(); // closing drawing path
// filling the shape with color
context.fillStyle = fillColor;
context.fill();
// adding stroke in the shape
context.strokeStyle = strokeColor;
context.lineWidth = 1;
context.stroke();
}
</script>
</head>
<body>
<canvas id="mainCanvas" width="300" height="200"> <!-- Creating a canvas! -->
Your browser doesn't support canvas property
</canvas>
</body>
</html>
** bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
cp1x = The x-coordinate of the first Bézier control point
cp1y = The y-coordinate of the first Bézier control point
cp2x = The x-coordinate of the second Bézier control point
cp2y = The y-coordinate of the second Bézier control point
x = The x-coordinate of the ending point
y = The y-coordinate of the ending point
Advertisemen
Tidak ada komentar:
Posting Komentar