如何从一个画布复制到其他画布
问题描述:
这里是 jsfiddle
我有这个作为我的源画布
i have this as my source canvas
HTML
<h1>Source Canvas</h1>
<canvas id="source" width=436 height=567></canvas>
<h1>Destination Canvas</h1>
<canvas id="destination" width=436 height=567></canvas>
javascript
javascript
var sourceImage, ctx, sourceCanvas, destinationCanvas;
//get the canvases
sourceCanvas = document.getElementById('source');
destinationCanvas = document.getElementById('destination');
//draw the source image to the source canvas
ctx = sourceCanvas.getContext('2d');
function start() {
ctx.drawImage(img1, 0, 0);
ctx.globalCompositeOperation = "source-atop";
var pattern = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, sourceCanvas.width, sourceCanvas.height);
ctx.fillStyle = pattern;
ctx.fill();
ctx.globalAlpha = .10;
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img1, 0, 0);
//ctx.globalAlpha = 1;
}
var img1 = new Image();
var img = new Image();
img.onload = function () {
img1.onload = function () {
start();
}
img1.src = "https://dl.dropboxusercontent.com/u/139992952/*/4jiSz1.png";
}
img.src = "https://dl.dropboxusercontent.com/u/139992952/*/BooMu1.png";
我想在目标画布中显示源画布中的内容。
i want to to show what is in source canvas in my destination canvas.
我累了
var image, destinationCtx;
//create the image
image = new Image();
//get the base64 data
image.src = sourceCanvas.toDataURL('image/png');
//get the destination context
destinationCtx = destinationCanvas.getContext('2d');
//copy the data
destinationCtx.drawImage(image, 0, 0);
//done
但没有运气。我错过了什么?
通过imageData复制,通过Base64数据复制,通过直接复制复制任何方法都可以完成我的工作。我试用时
but having no luck. am i missing something? Copy via imageData,Copy via Base64 data,Copy via direct draw any method will do my job. when i try with
http://jsperf.com/copying-a-canvas-element
它复制但是当我把我的源画布编写器它不起作用?我错过了什么吗?
http://jsperf.com/copying-a-canvas-element it copies but when i put my source canvas writer it does not work ? am i missing something?
答
您可以直接将一个画布复制到另一个画布上。像这样......
You can directly copy one canvas over other. Like this...
var destinationCtx;
//get the destination context
destinationCtx = destinationCanvas.getContext('2d');
//copy the data
destinationCtx.drawImage(sourceCanvas, 0, 0);