<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<canvas width="50" height="50" id="canvas_id" style="margin-top: 12px; border: 1px solid #333;"><p>Ihr Browser unterstützt das canvas-Element leider nicht.</p></canvas>
<script type="text/javascript">
<!--
// Sicherungsstring
var strSave = "";
var objCanvas = null;
var objContext = null;
function drawIt(){
objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
objContext = objCanvas.getContext('2d');
someRects();
}else{
// Sonstiger Code
}
}
function someRects(){
objContext.fillStyle = "#f00";
objContext.fillRect(0, 0, 50, 50);
objContext.fillStyle = "#000";
objContext.translate(25, 25);
objContext.save();
objContext.rotate(Math.PI/4);
objContext.fillRect(-18, -18, 36, 36);
objContext.restore();
objContext.fillStyle = "#fff";
objContext.fillRect(-10, -10, 20, 20);
objContext.translate(-25, -25);
}
function saveRects(){
// ImageData-Objekt des aktuellen Canvas-Zustands erstellen
var objImageData = objContext.getImageData(0, 0, objCanvas.width, objCanvas.height);
// Sicherungsstring generieren (über for und String wg. Opera)
var strSerialize = "";
for(var i=0; i<objImageData.data.length; i++){
strSerialize += objImageData.data[i].toString() + ",";
}
strSerialize = strSerialize.substring(0, strSerialize.length-1);
// Testausgabe und Testspeichern
document.getElementById("outID").innerHTML = "Sicherungsstring = " + strSerialize;
strData = strSerialize;
// TODO: Sicherungsstring (strSerialize) speichern - z.B. über AJAX in Datenbank
}
function restoreRects(){
// Image-Daten-Objekt erstellen
var objImageData = objContext.getImageData(0, 0, objCanvas.width, objCanvas.height);
// Wg. FF2
if(!window.opera){
var objElem = objCanvas.cloneNode(true);
objCanvas.parentNode.replaceChild(objElem, objCanvas);
objCanvas = objElem;
objContext = objCanvas.getContext('2d');
}
// Werte des gespeicherten Strings in Array
var arrData = String(strData).split(",");
// data-Array des Objekts durchlaufen
for(var i=0; i<objImageData.data.length; i++){
// Integerwerte des Sicherungsarrays zurückschreiben
objImageData.data[i] = parseInt(arrData[i]);
}
// Objekt wieder in Canvas rendern
objContext.putImageData(objImageData, 0, 0);
}
window.onload = function(){ drawIt();}
//-->
</script>
<div>
<button onclick="saveRects();">save</button>
<button onclick="objContext.clearRect(0, 0, 50, 50);">clear</button>
<button onclick="restoreRects();">restore</button>
</div>
<div id="outID"></div>
</body>
</html>
