Tôi có nhiều yếu tố canvas được tạo bởi JavaScript. Câu hỏi của tôi là: "Làm thế nào tôi có thể đặt nhiều phần tử canvas vào một phần tử canvas?".Tôi làm cách nào để đặt nhiều phần tử canvas vào một phần tử canvas?
Ở đây bạn đi;
Chỉ cần cung cấp phần tử canvas #bufferdisplay: none; và mọi thứ sẽ không nhìn thấy được (xem tại đây; http://jsfiddle.net/Allendar/UqxCY/2/).
HTML
<body onload="generatePNG()">
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
<canvas id="c3"></canvas>
<canvas id="buffer"></canvas>
<div id="output">Empty</div>
</body>
CSS
canvas[id^=c], div[id=output] {
border: 1px solid red;
}
canvas[id=buffer] {
border: 1px dotted green;
}
#output {
padding: 15px;
}
#output img {
border: 1px dotted blue;
}
Javascript
function generatePNG() {
var b_canvas1 = document.getElementById("c1");
var b_context1 = b_canvas1.getContext("2d");
b_context1.fillRect(10, 50, 50, 50);
var b_canvas2 = document.getElementById("c2");
var b_context2 = b_canvas2.getContext("2d");
b_context2.fillRect(80, 50, 50, 50);
var b_canvas3 = document.getElementById("c3");
var b_context3 = b_canvas3.getContext("2d");
b_context3.fillRect(150, 50, 50, 50);
var img1 = new Image();
img1.src = b_canvas1.toDataURL("image/png");
var img2 = new Image();
img2.src = b_canvas2.toDataURL("image/png");
var img3 = new Image();
img3.src = b_canvas3.toDataURL("image/png");
var buffer = document.getElementById("buffer");
var buffer_context = buffer.getContext("2d");
buffer_context.drawImage(img1, 0, 0);
buffer_context.drawImage(img2, 0, 0);
buffer_context.drawImage(img3, 0, 0);
var buffer_img = new Image();
buffer_img.src = buffer.toDataURL("image/png");
var output = document.getElementById('output');
output.innerHTML = '<img src="' + buffer_img.src + '" alt="Canvas Image" />';
}
Tác phẩm này nhưng bạn đang sử dụng jquery. Có khả năng làm điều đó mà không cần sử dụng jquery? – Julian
Chắc chắn; câu hỏi được cập nhật để bây giờ hoạt động hoàn toàn trên JavaScript gốc. –
Bạn không cần phải tạo hình ảnh trung gian. Phương thức drawImage có thể lấy trực tiếp một canvas khác làm hình ảnh để vẽ. –
Có lẽ một cái gì đó như thế này, xuất khẩu vải nguồn đến một hình ảnh, vẽ hình ảnh đó vào khung mục tiêu (chưa được kiểm tra):
function drawCanvasOnOtherCanvas(src, target) {
var img = new Image();
img.onload = function() {
target.drawImage(img, 0, 0);
};
img.src = src.toDataURL('image/png');
}
phương pháp drawImage Một của vải có thể thực sự lấy một canvas khác thay vì một hình ảnh - trước tiên bạn không cần phải chuyển đổi canvases thành hình ảnh. (Xem WhatWG's documentation.)
tôi đã đơn giản hóa JSFiddle Allendar để chứng minh:
Về cơ bản, tất cả các bạn cần làm là:
targetCanvas.drawImage(sourceCanvas, 0, 0);
và bạn nên đối xử tốt với đi.
bạn có thể thiết lập jsfiddle –