boolean's Canvas
Hello Canvas!
How to use line, text, shadow
About line
moveTo(x,y)
lineTo(x,y)
strokeStyle
stroke
beginPath
move to starting point with coordinate x and y.
Draw a line to this point from starting point. Again x and y being the coordinate.
CSS color of the line
A method to actually make javascript draw a line
Before you start drawing a new line with different color, you will have to call "beginPath".
About text
fillText(text,x,y)
strokeText(text,x,y)
strokeStyle
fillStyle
font
textBaseline
Print the text with solid color within. Text color is determined by fillStyle().
Print the text with only color the outline of the text. Text color is set by strokeStyle().
CSS color for text that call strokeText
CSS color for text that call fillText
CSS font style such as "bold, 10px, san-serif"
This is a little bit tricky to explain. We will need another demo. The value for this propery can be "top", "hanging","middle", "alphabetic", " eographic" and "bottom". Default value is "alphabetic".
[SOURCE VIEW] <![CDATA[
<!-- JavaScript-->
function doFirst1()
{
var x = document.getElementById('canvas1');
canvas = x.getContext('2d');
canvas.strokeStyle = "red";
canvas.beginPath();
canvas.moveTo(50,50);
canvas.lineTo(70,250);
canvas.lineTo(300,200);
canvas.closePath();
canvas.stroke();
canvas.beginPath();
canvas.moveTo(200,50);
canvas.lineTo(70,250);
canvas.lineTo(300,200);
canvas.closePath();
canvas.stroke();
canvas.beginPath();
canvas.moveTo(350,50);
canvas.lineTo(70,250);
canvas.lineTo(300,200);
canvas.closePath();
canvas.stroke();
canvas.beginPath();
canvas.moveTo(450,100);
canvas.lineTo(70,250);
canvas.lineTo(300,200);
canvas.closePath();
canvas.stroke();
canvas.shdowOffsetX = 4;
canvas.shdowOffsetY = 4;
canvas.shdowBlur = 6;
canvas.shdowColor = 'rgba(0,0,255,5)';
canvas.font = "bold 30px Tahoma";
canvas.textAlign = "end";
canvas.fillText("Boolean's HTML5 canvas Study!!!",550,350);
}
window.addEventListener("load",doFirst1,false);
<!-- HTML5-->
<section id ="main">
<canvas id = "canvas1" width = "600" height = "400" style = "border:1px solid #000000">
If you can see this, I'm sorry. <br />
You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html">
Google Chrome browser</a> to see HTNL5 Canvas
</canvas>
</section>
]]>
If you can see this, I'm sorry.
Google Chrome browser to see HTNL5 Canvas
[SOURCE VIEW] <![CDATA[
<!-- JavaScript-->
function doFirst2()
{
var x = document.getElementById('canvas2');
canvas = x.getContext('2d');
canvas.shdowOffsetX = 4;
canvas.shdowOffsetY = 4;
canvas.shdowBlur = 6;
canvas.shdowColor = 'rgba(0,0,255,5)';
canvas.font = "bold 30px Tahoma";
canvas.textAlign = "end";
canvas.fillText("Boolean's HTML5 canvas Study!!!",550,350);
canvas.textBaseline = "top";
canvas.fillText('Top',110,200);
canvas.textBaseline = "bottom";
canvas.fillText('Bottom',190,200);
canvas.textBaseline = "middle";
canvas.fillText('Middle',300,200);
canvas.textBaseline = "alphabetic";
canvas.fillText('Alphabetic',400,200);
canvas.textBaseline = "hanging";
canvas.fillText('Hanging',500,200);
}
window.addEventListener("load",doFirst2,false);
<!-- HTML5-->
<section id ="main">
<canvas id = "canvas2" width = "600" height = "400" style = "border:1px solid #000000">
If you can see this, I'm sorry. <br />
You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html">
Google Chrome browser</a> to see HTNL5 Canvas
</canvas>
]]>
If you can see this, I'm sorry.
Google Chrome browser to see HTNL5 Canvas
About shadow
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
Horizontal distance (x-axis) between the shadow and the shape in pixel.
Vertical distance (y-axis) between the shadow and the shape in pixel.
How blur you want your shadow to be.
Obviously, this is to set the color of your shadow
댓글