我想捕获一个画布的一小部分作为位图.那可能吗？这样我可以在该区域上绘制另一个位图后替换它.一旦我完成了位图,我想用原始作品替换我画的一小块画布.
谢谢！
解决方法
你可以使用
.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
- }
和一个简单的在线示例,只有你:)
