码迷,mamicode.com
首页 > Windows程序 > 详细

Canvas drawImage API

时间:2015-07-22 17:49:04      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

Canvas drawImage API

标签:

原文地址:http://www.cnblogs.com/stono/p/4667696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!