? ????? ??? ???? ?????? ???? ?? ??? ????? html5? ??? ??? ? ????. 1. ?? HTML? ??? ??? ???? ??? ?????. 2. ?? ?? ??? ? ??? ???? CTX? JavaScript? ?????. 3. CTX? ???? ??? ? ?? ?? ?? ???? ????. 4. ???? ???? ?? ???? ?? ????? ??; 5. ??? ???? ?? ??? ???? ? ????. ??? ??, ?? ??? ? ???? ???? ?? ?????????. ??? ???? ???? ??? ??? ?? ????.

? ????? ??? ???? ?????? ???? ?? ??? ????? html5 <canvas></canvas> ??? ?? ???? ?????. ? ??? ? ??? ? ??? ??? ??? JavaScript? ???? ??? ??? ??? ??? ? ???? ? ????.

??? ??? ????

?? html? <canvas></canvas> ??? ??????.

 <canvas id = "mycanvas"width = "500"height = "300"> </canvas>

? ??? ????? ???? ???? ??? ?? ??? ???? ????. width ? height ??? ???? ??? ?? ? ? ????. ???? ??? ?? ?? (????? 300x150)? ?????.

?? ?? ??? JavaScript? ?? ?? ??? ????? ????.

 const canvas = document.getElementById ( 'mycanvas');
const ctx = canvas.getContext ( '2d');

ctx ? "???"? ???? ???? ?? ?? ??? ? ???? ?????.

?? ???? ????

??? ??? ??? ??? ??? ? ????. ?? ?? ??? ???? ??? ? :

 ctx.fillstyle = 'blue';
ctx.fillRect (50, 50, 100, 100);

? ??? ??? ??? ????? ?? ? ?? ?? (50, 50)?? ???? ??? ??? 100 ??? ???? ????.

?? ?? ?? ?? ??? ??, ?, ? ?? ?? ?? ????.

 ctx.beginpath ();
ctx.arc (200, 150, 40, 0, math.pi * 2);
ctx.fillstyle = '???';
ctx.fill ();
ctx.closepath ();

• beginPath() ??? ??? ???? ?? ?????.
• arc(x, y, radius, startAngle, endAngle) ?? ??? ?????.
• fill() ??? ? ???.
• closePath() ??? ????.

?????? ?? ??? ???? ???

???? ???? ????? ??? ????? ??? ????. ???? ??? ???? ????? ??? ??? ??? ?? ??? ????. ?? ??, ?? ?? ???? ?????? ??????.

 x = 0???;
?? draw () {
    ctx.clearrect (0, 0, canvas.width, canvas.height); // CLEAR COLVAS CTX.BEGINPATH ();
    ctx.arc (x, 150, 20, 0, math.pi * 2);
    ctx.fillstyle = 'Green';
    ctx.fill ();
    x = 2;
    if (x> canvas.width) x = 0; // loop requestAnimationFrame (draw); // ????? ???}
???();

????? ?? ?? ???? ??? ??? ? ????. ??? ???? ?? ????? ???? ???? ??? ????? ?? ????? ?? ?? ???? ?? ??? ?? ????.

??? FAQ

• ??? ?? : ???? ?? ? ? ???? ???? CSS? ??? ??? ????? ?? ??? ???? ?? ??? ? ????. canvas.width ? canvas.height ???? ?? ????.
• ?? ??? : ?? ???? ??? ?? ?? ?? ? ?? ?? ? ????????.
• ???? ??? : ?? ????? ????? ???? ????? ?? ??? IE?? ????? ? ????.
• ???? ?? : canvas.toDataURL() ???? ???? ?? ??? ???? ??? ? ????.

????? ?? ??. ???? ??? ??? ??? ?? ?????, ?? ?? ?? ?? ??? ??? ???? ?? ?? ??? ????. ? ?? ????????.

? ??? HTML5 ???? ???? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!