画布截图

Question

我有一个帆布盒，我需要截取它以保存在画布框下的同一页面上。当你点击小图片时，它会带给你更大的画面。我想让它拍摄尽可能多的屏幕截图，并让它们都显示在页面上，直到我按下清除。

我知道我可以将dataToUrl（）用于保存部分，但我不知道其余部分是如何进行的。

Answer 1

//define some HTML to play with
<canvas id="mycanvas" width="400" height="200"></canvas>
<p><button type="button" id="savebutton">Save canvas</button></p>
<div id="gallery"></div>

<script>
//capture HTML elements
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var saveButton = document.getElementById('savebutton');
var gallery = document.getElementById('gallery');

//draw something in canvas to be captured
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, 400, 200);
ctx.fillStyle = 'red';
ctx.font = '50px Arial, sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello, world', 200, 100);

//define an event listener for the button
var addImage = function(e){
    var img = document.createElement("img");
    img.src = canvas.toDataURL();
    gallery.appendChild(img);
    if(e){
        e.preventDefault();
        e.returnValue=false;
    }
};
//clicking the button will create an image element from the canvas data
//and append it as a child element to the gallery div
saveButton.addEventListener('click', addImage, false);
</script>

http://jsfiddle.net/KaliedaRik/77bNp/