html5 – 如何将画布的一部分捕获到位图

前端之家收集整理的这篇文章主要介绍了html5 – 如何将画布的一部分捕获到位图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想捕获一个画布的一小部分作为位图.那可能吗?这样我可以在该区域上绘制另一个位图后替换它.一旦我完成了位图,我想用原始作品替换我画的一小块画布.

谢谢!

解决方法

你可以使用 .getImageData().putImageData()来做到这一点

var canvas,ctx,img,imgd,col;
window.onload = function () {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    col = {
        0: '#000',.25: '#0099f9',.55: '#03f',1: '#000'
    };
    img = document.getElementById('img');
    var w = h = canvas.width = canvas.height = 200;

    var grad = ctx.createRadialGradient(w / 2,w / 2,h);
    for (var i in col) {
        grad.addColorStop(i,col[i]); //just a funny mess,please don't bother :)
    }

    ctx.fillStyle = grad;
    ctx.fillRect(0,w,h);
    imgd = ctx.getImageData(50,50,20,20); //caching the image Data

}

function draw() {
    ctx.drawImage(img,20); //drawing Image on to canvas
}

function redraw() {
    ctx.putImageData(imgd,20); //redraw the cached Image Data
}

和一个简单的在线示例,只有你:)

Try it Here

原文链接:https://www.f2er.com/html5/168243.html

猜你在找的HTML5相关文章