HTML/Сanvas

Материал из Викиверситета

Использование тега <canvas> (Using the <canvas> Tag)[править]

Фрагмент кода ниже продемонстрировать некоторые особенности холст. Попробуйте играть и экспериментировать с фрагментом кода, изменив параметры вызовов методов.

<!DOCTYPE html>

<html lang='en'>

    <head>
        <!--[if IE]><script type='text/javascript' src='excanvas-c73p.js'></script><![endif]-->
    </head>

    <body style='padding:10px;' onload='doDraw();'>
        <canvas id='myCanvas' width='400' height='200'></canvas>
        <input type='button' value='Refresh Canvas' onclick='doDraw();'
               style='vertical-align:top;'/>
        <hr/>
        <div style='font-size:0.8em;'>
            The original chicken image was downloaded from
            <a href='http://www.sitevip.net/gifs/chicken'>
                http://www.sitevip.net/gifs/chicken</a>.
        </div>
        <img id='imgChickenBaby' src='image/chicken-baby.gif'/>
    </body>

</html>


<script type='text/javascript'>
    function doDraw()
    {
        // Get access to the canvas
        var myCanvas = document.getElementById('myCanvas');
        var vCtx     = myCanvas.getContext('2d');

        // Set the canvas background and border
        myCanvas.style.background = '#000000';
        myCanvas.style.border     = '3px solid #7F7F7F';

        // Clear the canvas
        vCtx.clearRect(0, 0, myCanvas.width, myCanvas.height);

        // Draw rectangles
        vCtx.fillStyle   = '#00FF00';
        vCtx.strokeStyle = '#FF0000';
        vCtx.lineWidth   = 2;

        vCtx.fillRect  (10, 10, 50, 50);
        vCtx.strokeRect(30, 30, 50, 50);

        // Draw a path
        vCtx.beginPath();
            vCtx.moveTo(100, 25);
            vCtx.lineTo(175, 50);
            vCtx.lineTo(125, 65);
        vCtx.closePath();

        vCtx.strokeStyle = '#0000FF';
        vCtx.stroke();

        // Draw rectangles using gradient
        var vGrad1 = vCtx.createLinearGradient(200, 0, 250, 0);
            vGrad1.addColorStop(0.0, '#FF0000');
            vGrad1.addColorStop(0.5, '#00FF00');
            vGrad1.addColorStop(1.0, '#0000FF');
        vCtx.fillStyle = vGrad1;
        vCtx.fillRect(200, 10, 50, 50);

        var vGrad2 = vCtx.createLinearGradient(260, 10, 310, 60);
            vGrad2.addColorStop(0.0, '#FF0000');
            vGrad2.addColorStop(0.5, '#00FF00');
            vGrad2.addColorStop(1.0, '#0000FF');
        vCtx.fillStyle = vGrad2;
        vCtx.fillRect(260, 10, 50, 50);

        // Draw a circle with glow (white shadow)
        vCtx.shadowBlur    = 25;
        vCtx.shadowColor   = '#FFFFFF';
        vCtx.shadowOffsetX = 0;
        vCtx.shadowOffsetY = 0;
        vCtx.beginPath();
        vCtx.arc(350, 35, 25, 0, Math.PI * 2, false);
        vCtx.fill();

        vCtx.shadowColor = 'transparent black';

        // Draw images
        var imgChickenBaby = document.getElementById('imgChickenBaby');
        vCtx.drawImage(imgChickenBaby,               10, 100             );
        vCtx.drawImage(imgChickenBaby,               50, 100,  44, 66    );
        vCtx.drawImage(imgChickenBaby, 5, 5, 12, 12, 120, 100, 48, 48);
    }
</script>

Объяснение[править]

Во-первых, нам необходимо определить холст стиль (фон / ясный цвет и границы), используя стандартные CSS, такие как:

    myCanvas.style.background = '# 000000';
    myCanvas.style.border = '3px solid #7F7F7F';


Курс HTML
Предыдущий урок: HTML/Формы Следующий курс: CSS