码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas get/putImageData

时间:2015-07-22 18:03:22      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get/putImageData</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);
        // 获取从50,50到200,200的区域
        var imgData = cxt.getImageData(50,50,200,200);
        // 将获得的整个像素绘制到10,260开始的Canvas上面
        cxt.putImageData(imgData,10,260);
        // 将取得的一部分像素(从50,50开始宽高为100,100),
        // 绘制到200,260开始的Canvas上面
        cxt.putImageData(imgData,200,260,50,50,100,100);
    };
    </script>
</body>
</html>

 

Canvas get/putImageData

标签:

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

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