HTML5 Tutorial – 40 – Transformations

[ad_1]
Facebook –
GitHub –
Google+ –
LinkedIn –
reddit –
Support –
thenewboston –
Twitter –


Posted

in

by

Tags:

Comments

30 responses to “HTML5 Tutorial – 40 – Transformations”

  1. Carlos Eduardo Fernández Avatar

    If anyone wnats to Knos what radians are, contactme…

  2. Robson Sousa Avatar

    <!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!

  3. Mervin Lee Avatar

    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?

  4. Derek C Avatar

    has there been an update since these videos

  5. Derek C Avatar

    only half of it is working for me

  6. Ranko Hadzi - Novakovic Avatar

    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!

  7. Ramheel Guiao Avatar

    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!

  8. Jai-Liel Williams Avatar

    "What the fudge is up everyone?!" im saying that for now on when i enter a room….

  9. bkonoyan nyn Avatar

    1 Radian=57 degree (nearly)

  10. LordStarBlue Avatar

    Thank you for the tutorial !

  11. Zanntul Fardos Avatar

    Excellent tutorial! It removes my short mistakes.

  12. カラス Avatar

    "The best way to learn all this stuff is to basically play around with it"
    That is what school teachers need to understand!

  13. RLS0812 Avatar

    Degree * 0.01745329251 = radian

  14. SDixit95 Avatar

    "Translate" is actually used in Physics to describe motion without rotation (spin). So thats where that comes from…

  15. Jibin John Avatar

    what the fudge is up guys??? :))

  16. Where The Story Ends Avatar

    Convert degrees to radians: 45 * (Math.PI / 180)

  17. adtc Avatar

    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.

  18. seanarooni Avatar

    some people don't learn anything in high school sadly =(

  19. Skiper 1100 Avatar

    On the text align property isnt the text by default at start?

  20. Smajkeful Avatar

    U dont learn radians in High???

  21. jurgyy Avatar

    whoohoo, alsmost at 80% HTML5

  22. SurgeDungeon Avatar

    Tuna, bacon, apples and Tahoma. We all know who I'm talkin' bout.

  23. ErichLancaster Avatar

    What on earth is up with Language writers. Have they ever heard of consistency? You have degrees in CSS3 and radians in HTML5!

  24. Jesus Adolfo Avatar

    I did it but I forgot it

  25. THEGAMINGRULER Avatar

    java script is like many other programing languages that use radions instead of deg

  26. Piscary Kaito Avatar

    @gregonthebox so 360deg would be 6.28 radians?

  27. someonecares2 Avatar

    Cool vid. So, is it like "stacking" canvases on top of each other?

  28. Gregory Woods Avatar

    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

Your email address will not be published. Required fields are marked *