Has anyone encountered a clear guide to using canvas from html5. I tried some examples, it seems, everything works out, but I did not get an understanding.

UPD1: Just selectively read it. A piece of google mail checker'a:

function animateFlip() { rotation += 1/animationFrames; drawIconAtRotation(); if (rotation <= 1) { setTimeout("animateFlip()", animationSpeed); } else { rotation = 0; drawIconAtRotation(); chrome.browserAction.setBadgeBackgroundColor({color:[208, 0, 24, 255]}); } } function ease(x) { return (1-Math.sin(Math.PI/2+x*Math.PI))/2; } function drawIconAtRotation() { canvasContext.save(); canvasContext.clearRect(0, 0, canvas.width, canvas.height); canvasContext.translate( Math.ceil(canvas.width/2), Math.ceil(canvas.height/2)); canvasContext.rotate(2*Math.PI*ease(rotation)); canvasContext.drawImage(loggedInImage, -Math.ceil(canvas.width/2), -Math.ceil(canvas.height/2)); canvasContext.restore(); chrome.browserAction.setIcon({imageData:canvasContext.getImageData(0, 0, canvas.width,canvas.height)}); }

I'm trying to figure out how the drawIconAtRotation function drawIconAtRotation . Especially I do not understand what the ease() function is.

UPD2: If you dig even deeper, then I do not understand, the actions themselves in drawIconAtRotation . Why do I need to save the state with save() , how does translate() , rotate() ? I found an article on Habré about transformation, but I still haven’t figured it out = (

    1 answer 1

    HTML Canvas 2D Context - so much clearer ??

    Ask specific questions.
    But I, personally, do not know what is there incomprehensible. Choose a figure, put points. Everything.

    UPD1 :
    Well, with drawIconAtRotation everything is already clear from the name (and even more so from the code) - the function drawIconAtRotation icon, rotated at some angle. What a function of ease - one author knows. Some kind of geometry (I had a triple in geometry) :).

    UPD1.1:
    Well, you add different values ​​to this ease function. In my opinion, it is arranged in such a way that it gives out beautiful angles (in radians) when the parameter is changed from 0 to 1. That is, it really simplifies the calculations;).
    You may think that this function sets the angle as a function of time (i.e., the variable rotation is, as it were, time, since it changes linearly). And the dependence is chosen in such a way that the animation looks good (if you look at the formula, you can see that this is a rotation with cosine speed - that is, at the beginning and at the end it is small, and in the center - a large ... something like a pendulum ).

    The canvas state
    Transformations

    State - a set of context attributes: pen and fill parameters, shadows, font, transformation matrix. save saves the current state to the conditional stack, restore - restores the last state from the stack.

    translate and rotate multiply the current matrix by the shift or rotation matrix, respectively.

    • one
      those. Is all the operation done on the stack? - psyhitus
    • one
      All operations are performed on your current canvas. The idea is that you, before making any modifications (for example, changing the color of the line), keep the previous state. Then you draw what you need, switch colors, fonts there, twist the canvas, etc. When finished, restore the previous state from the stack, so the caller will not notice that you changed colors there. - kirelagin