[ad_1]
Facebook –
GitHub –
Google+ –
LinkedIn –
reddit –
Support –
thenewboston –
Twitter –
HTML5 Tutorial – 40 – Transformations
by
Tags:
Comments
30 responses to “HTML5 Tutorial – 40 – Transformations”
-
If anyone wnats to Knos what radians are, contactme…
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1"/>
<!– HTML5 Tutorial – 40 – Transformations –>
<title>Transformations</title>
<script type="text/javascript" src="tutorial40.js"></script></head>
<body style="background-color: #8EE5EE">
<section>
<canvas id="canvas" width="1024" height="580">
Hopefully you don't see this. If you do, get Google Chrome.</canvas>
</section></body>
</html>function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.shadowOffsetX = 4;
canvas.shadowOffsetY = 4;
canvas.shadowBlur = 6;
canvas.shadowColor = 'gray';canvas.font = "bold 30px Time New Roman";
canvas.textAlign="start";
canvas.fillText("start", 50, 50);canvas.translate(200, 100);
canvas.fillText("after translate", 0, 0)canvas.rotate(6.0);
canvas.fillText("after rotate", 0, 0);canvas.scale(1.5, 1.5);
canvas.rotate(6.8);
canvas.fillText("after rotate", 0, 0);}
window.addEventListener("load", doFirst, false);
function doAfter(){
var x = document.getElementById('canvas');
canvas.shadowOffsetX = 4;
canvas.shadowOffsetY = 4;
canvas.shadowBlur = 6;
canvas.shadowColor = 'violet';canvas.translate(350, 50);
canvas.fillText("after translate", 0, 0)for(i = 0; i < 10; ++i){
canvas.rotate(0.5);
canvas.fillText("after rotate", 0, 0);
}
}window.addEventListener("load", doAfter, false);
I'm just trying to do something… sorry about my confuse and repetitive code!
-
My canvas.fillText("after translate", 10,30); did not work but it only works when I changed it to canvas.fillText("after translate", 0,0); maybe I didn't hear him correctly, did he say that it was not meant to move with those coordinates?
-
excellent tutorials
-
has there been an update since these videos
-
only half of it is working for me
-
If you need to do rotation by degree all you need to do is place simple formula for canvas in HTML5 "canvas.rotate((Math.PI / 180) * 25); //rotate 25 degrees" so when we change last value thats how much degrees we get. Bucky you are the best!!! –> These tutorials –> education can be FUN but only when you do it… all my teachers make lessons sound so FCKING BORING!
-
I think not all computer programs run each line one by one. 3:38
Know the difference between a compiler and an interpreter.
Just sharing 🙂 Thanks for this wonderful tutorials Bucky!
-
"What the fudge is up everyone?!" im saying that for now on when i enter a room….
-
1 Radian=57 degree (nearly)
-
Thank you for the tutorial !
-
Excellent tutorial! It removes my short mistakes.
-
"The best way to learn all this stuff is to basically play around with it"
That is what school teachers need to understand! -
Degree * 0.01745329251 = radian
-
"Translate" is actually used in Physics to describe motion without rotation (spin). So thats where that comes from…
-
what the fudge is up guys??? :))
-
Convert degrees to radians: 45 * (Math.PI / 180)
-
It would make more sense to imagine the canvas as a stencil. Even if you move or rotate a stencil on top of the paper, what was previously stenciled on paper do not move or rotate along with the stencil.
-
some people don't learn anything in high school sadly =(
-
On the text align property isnt the text by default at start?
-
U dont learn radians in High???
-
whoohoo, alsmost at 80% HTML5
-
Tuna, bacon, apples and Tahoma. We all know who I'm talkin' bout.
-
What on earth is up with Language writers. Have they ever heard of consistency? You have degrees in CSS3 and radians in HTML5!
-
Bucky is awsome
-
I did it but I forgot it
-
java script is like many other programing languages that use radions instead of deg
-
@gregonthebox so 360deg would be 6.28 radians?
-
Cool vid. So, is it like "stacking" canvases on top of each other?
-
1 Radian is an Arc with a length equal to the radius……
That's the center of a circle to its border (RADIUS)
This length is measured around the circles border (PERIMETER)
That angle is equal to 1 Radian
Leave a Reply