Advertisemen
Hey guys, In this tutorial, I will be teaching you guys how to create star shape in browser using HTML5 and Javascript.
I have explained the codes with comments on the side of them so take a look at the comments if you don't understand the codes or you can ask me in the comment section below.
This is what we are going to create.
<!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 the canvas created below inside the body tag
var canvas = document.getElementById(canvasId);
var context = canvas.getContext('2d');
// Declaring colors
var strokeColor = 'rgba(0, 0, 0, 1)';
var fillColor = 'rgba(255, 29, 29, 1)';
// declaring function to add shadow in the shape
function shadow(context)
{
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 5;
context.shadowColor = strokeColor;
}
// Star Drawing
context.beginPath(); // that's how you start drawing
context.moveTo(112, 40); // declaring starting and finishing point moveTo(x, y)
context.lineTo(130.34, 65.73); // drawing line for star
context.lineTo(161.45, 74.55);
context.lineTo(141.67, 99.27);
context.lineTo(142.56, 130.45);
context.lineTo(112, 120);
context.lineTo(81.44, 130.45);
context.lineTo(82.33, 99.27);
context.lineTo(62.55, 74.55);
context.lineTo(93.66, 65.73);
context.closePath(); // that's how you end drawing
context.save(); // *check the explanation below
shadow(context); // calling adding shadow function
// adding colors
context.fillStyle = fillColor;
context.fill();
context.restore(); // *check the explanation below
context.strokeStyle = strokeColor;
context.lineWidth = 1;
context.stroke();
}
</script>
</head>
<body style="margin: 0px;">
<canvas id="mainCanvas" width="300" height="200">
<!-- Create the canvas with the width and height of 300px and 200px respectively !-->
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 the canvas created below inside the body tag
var canvas = document.getElementById(canvasId);
var context = canvas.getContext('2d');
// Declaring colors
var strokeColor = 'rgba(0, 0, 0, 1)';
var fillColor = 'rgba(255, 29, 29, 1)';
// declaring function to add shadow in the shape
function shadow(context)
{
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 5;
context.shadowColor = strokeColor;
}
// Star Drawing
context.beginPath(); // that's how you start drawing
context.moveTo(112, 40); // declaring starting and finishing point moveTo(x, y)
context.lineTo(130.34, 65.73); // drawing line for star
context.lineTo(161.45, 74.55);
context.lineTo(141.67, 99.27);
context.lineTo(142.56, 130.45);
context.lineTo(112, 120);
context.lineTo(81.44, 130.45);
context.lineTo(82.33, 99.27);
context.lineTo(62.55, 74.55);
context.lineTo(93.66, 65.73);
context.closePath(); // that's how you end drawing
context.save(); // *check the explanation below
shadow(context); // calling adding shadow function
// adding colors
context.fillStyle = fillColor;
context.fill();
context.restore(); // *check the explanation below
context.strokeStyle = strokeColor;
context.lineWidth = 1;
context.stroke();
}
</script>
</head>
<body style="margin: 0px;">
<canvas id="mainCanvas" width="300" height="200">
<!-- Create the canvas with the width and height of 300px and 200px respectively !-->
Your browser doesn't support canvas property.
</canvas>
</body>
</html>
* [ This part is extracted from Mozilla Foundation]
Canvas states are stored on a stack. Every time the
save() method is called, the current drawing state is pushed onto the stack. A drawing state consists of- The transformations that have been applied (i.e.
translate,rotateandscale– see below). - The current values of the following attributes:
strokeStyle,fillStyle,globalAlpha,lineWidth,lineCap,lineJoin,miterLimit,lineDashOffset,shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor,globalCompositeOperation,font,textAlign,textBaseline,direction,imageSmoothingEnabled. - The current clipping path, which we'll see in the next section.
You can call the
save() method as many times as you like. Each time the restore() method is called, the last saved state is popped off the stack and all saved settings are restored.
Advertisemen
Tidak ada komentar:
Posting Komentar