Loading

Canvas drawImage API

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>

 

posted @ 2015-07-22 15:58  stono  阅读(459)  评论(0)  编辑  收藏  举报