Canvas drawImage API

时间：2021-12-16 18:11:07

drawImage

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>img</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='400'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var cxt = c.getContext('2d');

    var img = new Image();

    img.src = 'face.jpg';

    img.onload = function() {

        // 从10,10坐标开始绘制整个图片

        cxt.drawImage(img, 10, 10);

        // 从260,10开始把图片绘制到100x100的矩形区域内

        cxt.drawImage(img, 260, 10, 100, 100);

        // 截取图片50,50到100,100的区域，从260,130开始，绘制到100x100区域内

        cxt.drawImage(img, 50, 50, 100, 100, 260, 130, 100, 100);

    };

    </script>

</body>

</html>

相关文章