So erstellen Sie eine webbasierte Zeichenanwendung mithilfe von Canvas

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Wenn Sie HTML mit der brandneuen <canvas>-Funktion kombinieren, können Sie einige ziemlich großartige Web-Apps erstellen! In diesem Tutorial erstellen wir eine übersichtliche interaktive Zeichenanwendung mit HTML und JavaScript. Unterwegs lernen wir auch die grundlegenden Konzepte der brandneuen <canvas> -Funktion kennen.

Das <canvas>-Tag ist ein relativ neues Element, das schnell an Popularität gewinnt. Es kann für eine Vielzahl verschiedener Dinge verwendet werden, z. B. zum Zeichnen von Grafiken, Formen, Bildern, Anwenden von Stilen und Farben, Erstellen von Fotokompositionen und sogar für einige einfache, übersichtliche Animationen. Heute erstellen wir eine einfache Online-Zeichenanwendung, ähnlich wie http://www.mugtug.com/sketchpad/

Das Erstellen einer Zeichenfläche auf Ihrer Site ist so einfach wie das Hinzufügen des <canvas>-Tags zu Ihrem HTML-Dokument, wie unten gezeigt:

1	<canvas id="canvas" width="800" height="600">
2	We're sorry, the browser you are using does not support <canvas>. Please upgrade your browser.
3	<!--Anything inside of the canvas tag will only display if the browser does not support the <canvas> tag.-->
4	</canvas>

Das Element 'ID' ist nicht erforderlich, wird jedoch dringend empfohlen, damit Sie es später in Ihrem JavaScript und/oder CSS finden können.

Schritt 1 Was machen wir?

Unten ist ein Bild von dem, was wir machen werden. Ihre sehen möglicherweise etwas anders aus, wenn wir vollständig fertig sind, abhängig von der Art der Stile, die Sie verwenden möchten usw.

Wie Sie sehen können, bin ich eine schreckliche Schublade, aber vielleicht können Sie, nachdem Sie Ihre Tafel erstellt haben, ein fantastisches Meisterwerk erstellen! Außerdem bauen wir die Tafel, nicht die Zeichnung!

Schritt 2 Was brauchen Sie?

Für dieses Tutorial benötigen Sie grundlegende Kenntnisse in HTML und JavaScript.

Photoshop oder ein anderer Bildeditor
Code-Editor Ihrer Wahl
Grundkenntnisse in HTML und JavaScript
<canvas> unterstützter Browser (Chrome, Firefox, Opera, Safari)

Ich werde auch das kostenlose Fugue Icon Pack verwenden, das hier heruntergeladen werden kann: http://p.yusukekamiyamane.com/

Darüber hinaus werden wir die folgenden Skripte verwenden, um das endgültige Ergebnis zu erzielen.

Schritt 3 Erste Schritte

Lassen Sie uns ohne weiteres gleich loslegen!

Das HTML-Markup

Öffnen Sie zunächst Ihre Codierungsanwendung und erstellen Sie ein reguläres HTML-Dokument. Kopieren Sie den folgenden Code und fügen Sie ihn ein. Dies ist die Grundstruktur unserer Zeichenanwendung. Speichern Sie das Dokument in einem neuen Ordner mit der Bezeichnung "canvas" (oder einem beliebigen gewünschten Ordner). Erstellen Sie jetzt auf derselben Ebene wie Ihre HTML-Datei drei neue Ordner.

JS
CSS
Images

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  <html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<!-- External CSS Document(s) --> 
  <link rel="stylesheet" type="text/css" href="css/styles.css" /> 
 
<title>Online Drawing Application | Web Design Deluxe</title> 
 
<!-- Eternal JavaScript Document(s) --> 
  <script type="text/javascript" src="js/canvas.js"></script> 
 
</head> 
<body> 
 
<!-- Wrapper Begins -->	<div id="wrapper"> 
 
		<div id="blackboardPlaceholder"> 
		</div> 
 
	</div> 
 
</body> 
</html>

Dies ist das grundlegende Markup unserer Seite. Bevor wir mit dem Schreiben des eigentlichen Codes beginnen, lassen Sie uns dies etwas näher erläutern. Ich werde Ihnen nicht zeigen, wie Sie das Design in Photoshop erstellen, aber Sie können die Bilder hier herunterladen. Stellen Sie sicher, dass Sie alle Bilder in den soeben erstellten images ordner kopieren.

Das CSS-Markup

Erstellen Sie ein neues Stylesheet mit dem Namen "styles.css" und speichern Sie es in Ihrem "css"-Ordner. Kopieren Sie den folgenden grundlegenden CSS-Code und fügen Sie ihn in Ihr Stylesheet ein.

@charset "UTF-8"; 
/* CSS Document */ 
 
* { margin:0; padding:0; } 
 
body { 
  background:url(../images/bg.gif) repeat-x #f8f8f8; 
  color:#d7d7d7; 
  font-family:"Belle","Comic Sans MS", cursive; 
  font-size:25px; 
  line-height:27px;} 
 
#wrapper { 
  position:relative; 
  width:960px; 
  margin:0 auto; 
  padding-top:75px;} 
 
<!-- Blackboard --> 
  #blackboardPlaceholder { 
  background:url(../images/blackboard.png) no-repeat; 
  width:924px; 
  height:599px; 
  margin:0 auto; 
  padding:14px 0 75px 14px; 
  cursor:crosshair; 
}

Schritt 4 Das Canvas-Tag

Wir werden das Canvas-Tag direkt in den blackboardPlaceholder einfügen. Fügen Sie den folgenden Code in die ID 'blackboardPlaceholder' ein.

<!-- Canvas Begins --> 
<canvas id="drawingCanvas" height="532" width="897"> 
<p class="noscript">We're sorry, this web application is currently not supported with your browser. Please use an alternate browser or download a supported <br />browser. Supported browsers: <a href="http://www.google.com/chrome">Google Chrome</a>, <a href="http://www.opera.com">Opera</a>, <a href="http://www.mozilla.com">Firefox</a>, <a href="http://www.apple.com/safari">Safari</a>, <br />and <a href="http://www.konqueror.org">Konqueror</a>. Also make sure your JavaScript is enabled.</p> 
</canvas> 
<!-- Canvas Ends -->

Dies ist die genaue Breite und Höhe der Leinwand, die wir erstellen, sodass Sie dies nicht ändern müssen. Wie oben erwähnt, wird alles zwischen den Canvas-Tags nur angezeigt, wenn JavaScript deaktiviert wurde oder der Browser kein Canvas unterstützt.

Als nächstes lassen Sie uns die ID ein wenig auffrischen. Fügen Sie in Ihrer Datei styles.css Folgendes hinzu:

#drawingCanvas { 
 position:absolute; 
 border:none; 
 color:#FFF; 
 overflow:hidden; 
 background-color:transparent; 
 } 
#tempCanvas { position: absolute; width:897px; height:532px; overflow:hidden; }

Ich werde die #tempCanvas ID in Kürze erklären, wenn wir mit dem Schreiben des JavaScript beginnen.

Schritt 5 JavaScript-Implementierung

Lassen Sie uns jetzt unsere Leinwand so funktionieren, wie sie sollte. Erstellen Sie zunächst eine neue JS-Datei und nennen Sie sie "canvas". Speichern Sie diese Datei im Ordner 'JS'.

1	var context;

Als Nächstes fügen wir mithilfe der Funktionen addEventListener und onLoad eine Funktion hinzu, um festzustellen, ob das HTML-Dokument ein Canvas-Tag enthält. Fügen Sie dies direkt unter die von uns erstellte Variable ein.

1	// Check for the canvas tag onload.
2	if(window.addEventListener) {
3	window.addEventListener('load', function () {

Fügen wir nun einige Standardvariablen und einige Fehlermeldungen hinzu - falls etwas schief gelaufen ist.

var canvas, canvaso, contexto; 
 // Default tool. (chalk, line, rectangle) 
   var tool; 
   var tool_default = 'chalk'; 
 
function init () { 
canvaso = document.getElementById('drawingCanvas'); 
   if (!canvaso) { 
   alert('Error! The canvas element was not found!'); 
   return; 
   } 
 if (!canvaso.getContext) { 
   alert('Error! No canvas.getContext!'); 
   return; 
   } 
// Create 2d canvas. 
   contexto = canvaso.getContext('2d'); 
   if (!contexto) { 
   alert('Error! Failed to getContext!'); 
   return; 
   } 
 // Build the temporary canvas. 
   var container = canvaso.parentNode; 
   canvas = document.createElement('canvas'); 
   if (!canvas) { 
   alert('Error! Cannot create a new canvas element!'); 
   return; 
   } 
 canvas.id     = 'tempCanvas'; 
   canvas.width  = canvaso.width; 
   canvas.height = canvaso.height; 
   container.appendChild(canvas); 
context = canvas.getContext('2d'); 
   context.strokeStyle = "#FFFFFF";// Default line color. 
   context.lineWidth = 1.0;// Default stroke weight. 
 
   // Fill transparent canvas with dark grey (So we can use the color to erase). 
   context.fillStyle = "#424242"; 
   context.fillRect(0,0,897,532);//Top, Left, Width, Height of canvas.

Wir haben einige neue Variablen und Methoden erstellt, die später verwendet werden.

Der context.strokeStyle ist die Farbe unseres Strichs. Wir werden den Standardwert '#FFFFFF' festlegen, der der Hex-Wert für Weiß ist. Als nächstes kommt die context.lineWidth. Dies ist der Strich unserer Linie. Wir werden den Standardwert '1.0' belassen. Jetzt erstellen wir ein graues Rechteck, das wir später verwenden können, wenn wir die Möglichkeit hinzufügen, unser Bild zu speichern. Wir füllen das Rechteck mit Grau oder '#424242' und machen es auf die exakte Größe unserer canvas.

Lassen Sie uns fortfahren und unser Dropdown-Menü erstellen, in dem wir zwischen Kreide, Rechteck oder Linie wählen können.

// Create a select field with our tools. 
 var tool_select = document.getElementById('selector'); 
 if (!tool_select) { 
 alert('Error! Failed to get the select element!'); 
 return; 
 } 
 tool_select.addEventListener('change', ev_tool_change, false); 
 
 // Activate the default tool (chalk). 
 if (tools[tool_default]) { 
 tool = new tools[tool_default](); 
 tool_select.value = tool_default; 
 } 
 // Event Listeners. 
   canvas.addEventListener('mousedown', ev_canvas, false); 
   canvas.addEventListener('mousemove', ev_canvas, false); 
   canvas.addEventListener('mouseup',   ev_canvas, false); 
   } 
// Get the mouse position. 
   function ev_canvas (ev) { 
   if (ev.layerX || ev.layerX == 0) { // Firefox 
   ev._x = ev.layerX; 
   ev._y = ev.layerY; 
   } else if (ev.offsetX || ev.offsetX == 0) { // Opera 
   ev._x = ev.offsetX; 
   ev._y = ev.offsetY; 
   } 
// Get the tool's event handler. 
   var func = tool[ev.type]; 
   if (func) { 
   func(ev); 
   } 
   } 
   function ev_tool_change (ev) { 
   if (tools[this.value]) { 
   tool = new tools[this.value](); 
   } 
   } 
// Create the temporary canvas on top of the canvas, which is cleared each time the user draws. 
   function img_update () { 
   contexto.drawImage(canvas, 0, 0); 
   context.clearRect(0, 0, canvas.width, canvas.height); 
   } 
   var tools = {}; 
 // Chalk tool. 
   tools.chalk = function () { 
   var tool = this; 
   this.started = false; 
 // Begin drawing with the chalk tool. 
   this.mousedown = function (ev) { 
   context.beginPath(); 
   context.moveTo(ev._x, ev._y); 
   tool.started = true; 
   }; 
   this.mousemove = function (ev) { 
   if (tool.started) { 
   context.lineTo(ev._x, ev._y); 
   context.stroke(); 
   } 
   }; 
   this.mouseup = function (ev) { 
   if (tool.started) { 
   tool.mousemove(ev); 
   tool.started = false; 
   img_update(); 
   } 
   }; 
   };

Wir haben gerade die Zeichenfunktion für die Kreide erstellt! Natürlich funktioniert unsere Leinwand zu diesem Zeitpunkt noch nicht, aber wir sind fast da!

Lassen Sie uns jetzt unser Rechteck-Werkzeug machen.

// The rectangle tool. 
 tools.rect = function () { 
 var tool = this; 
 this.started = false; 
 this.mousedown = function (ev) { 
 tool.started = true; 
 tool.x0 = ev._x; 
 tool.y0 = ev._y; 
 }; 
 this.mousemove = function (ev) { 
 if (!tool.started) { 
 return; 
 } 
 // This creates a rectangle on the canvas. 
 var x = Math.min(ev._x,  tool.x0), 
 y = Math.min(ev._y,  tool.y0), 
 w = Math.abs(ev._x - tool.x0), 
 h = Math.abs(ev._y - tool.y0); 
 context.clearRect(0, 0, canvas.width, canvas.height);// Clears the rectangle onload. 
 
if (!w || !h) { 
   return; 
   } 
   context.strokeRect(x, y, w, h); 
   }; 
   // Now when you select the rectangle tool, you can draw rectangles. 
   this.mouseup = function (ev) { 
   if (tool.started) { 
   tool.mousemove(ev); 
   tool.started = false; 
   img_update(); 
} 
}; 
};

Und jetzt zum Linienwerkzeug.

// The line tool. 
 tools.line = function () { 
 var tool = this; 
 this.started = false; 
 this.mousedown = function (ev) { 
 tool.started = true; 
 tool.x0 = ev._x; 
 tool.y0 = ev._y; 
 }; 
 this.mousemove = function (ev) { 
 if (!tool.started) { 
 return; 
 } 
 context.clearRect(0, 0, canvas.width, canvas.height); 
 // Begin the line. 
 context.beginPath(); 
 context.moveTo(tool.x0, tool.y0); 
 context.lineTo(ev._x,   ev._y); 
 context.stroke(); 
 context.closePath(); 
 }; 
 // Now you can draw lines when the line tool is seletcted. 
 this.mouseup = function (ev) { 
 if (tool.started) { 
 tool.mousemove(ev); 
 tool.started = false; 
 img_update(); 
 } 
 }; 
 };

Und das ist fast unser JavaScript! Schließen wir nun die Funktion und Variablen, die wir vor einiger Zeit erstellt haben, indem wir damit enden:

 init();

1	}, false); }

Schritt 6 Einfügen der Werkzeugauswahl

Kehren wir zu unserer HTML-Seite zurück. Wir werden nun die Werkzeugauswahl mit einem einfachen HTML-Dropdown-Formular-Tag erstellen.

Fügen Sie direkt unter dem Anfang des Tags 'blackboardPlaceholder' und direkt vor unserem Canvas-Tag den folgenden Code hinzu, um die Auswahl des Dropdown-Tools zu erstellen.

<p><!-- Tool Selector --> 
<select name="selector" id="selector"> 
<option value="chalk">Chalk</option> 
<option value="line">Line</option> 
<option value="rect">Rectangle</option> 
</select> 
</p>

Und das ist es! Jetzt haben wir ein Dropdown-Formular. Fügen wir etwas Styling hinzu.

.noscript { padding:50px 30px 0 40px; width:820px; } 
#selector { 
 position:absolute; 
 z-index:99999; 
 margin-top:-30px; 
 } 
select { 
 font-family:Verdana, Geneva, sans-serif; 
 font-size:12px; 
 background-color:#EAEAEA; 
 }

Das .noscript ist der Stil für den Text zwischen dem Canvas-Tag, den wir oben nie hinzugefügt haben.

Schritt 7 Ändern der Farbe

Nur um Sie zu informieren, das sind Kreidestücke. Ich hatte das Gefühl, dass ich Ihnen aufgrund meiner Designfähigkeiten mitteilen musste, was sie waren, weil mir viele Leute erzählten, dass sie einem Stück Kreide nicht im entferntesten nahe kommen :)

Es ist eigentlich ganz einfach, die Farbe im HTML zu ändern. Sie müssen lediglich die Onclick-Funktion verwenden. Links, Bilder, Text, Klassen usw. Die Funktion, mit der wir die Farbe ändern, ist unten aufgeführt.

1	onclick="context.strokeStyle = '#ff00d2';"

Um die Farbe zu ändern, ändern Sie einfach den Hex-Farbcode zwischen den Klammern. #FF00D2, wie oben verwendet, ändert die Strichfarbe in Pink.

Fügen wir nun das HTML-Markup für die Kreidestücke hinzu.

<!-- Chalk Pieces --> 
<div id="whiteChalk_button"> 
<img src="images/white.png" width="71" height="17" onclick="context.strokeStyle = '#FFFFFF';" /> 
</div> 
<div id="redChalk_button"> 
<img src="images/red.png" width="71" height="17" onclick="context.strokeStyle = '#F00000';" /> 
</div> 
<div id="orangeChalk_button"> 
<img src="images/orange.png" width="71" height="17" onclick="context.strokeStyle = '#ff9600';" /> 
</div> 
<div id="yellowChalk_button"> 
<img src="images/yellow.png" width="71" height="17" onclick="context.strokeStyle = '#fff600';" /> 
</div> 
<div id="greenChalk_button"> 
<img src="images/green.png" width="71" height="17" onclick="context.strokeStyle = '#48ff00';" /> 
</div> 
<div id="blueChalk_button"> 
<img src="images/blue.png" width="71" height="17" onclick="context.strokeStyle = '#001eff';" /> 
</div> 
<div id="pinkChalk_button"> 
<img src="images/pink.png" width="71" height="17" onclick="context.strokeStyle = '#ff00d2';" /> 
</div>

Fügen Sie den obigen Code direkt unter dem </canvas>-Tag hinzu.

Ihr HTML-Code sollte bisher wie folgt aussehen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<!-- External CSS Document(s) --> 
<link rel="stylesheet" type="text/css" href="css/styles.css" /> 
<title>Online Drawing Application | Web Design Deluxe</title> 
<!-- Eternal JavaScript Document(s) --> 
<script type="text/javascript" src="js/canvas.js"></script> 
</head> 
<body> 
 
<!-- Wrapper Begins --> 
<div id="wrapper"> 
 
<div id="blackboardPlaceholder"> 
 
<p><!-- Tool Selector --><select name="selector" id="selector"><option value="chalk">Chalk</option><option value="line">Line</option><option value="rect">Rectangle</option></select></p> 
 
<!-- Canvas Begins --><canvas id="drawingCanvas" height="532" width="897"> <p class="noscript">We're sorry, this web application is currently not supported with your browser. Please use an alternate browser or download a supported <br />browser. Supported browsers: <a href="http://www.google.com/chrome">Google Chrome</a>, <a href="http://www.opera.com">Opera</a>, <a href="http://www.mozilla.com">Firefox</a>, <a href="http://www.apple.com/safari">Safari</a>, <br />and <a href="http://www.konqueror.org">Konqueror</a>. Also make sure your JavaScript is enabled.</p></canvas> <!-- Canvas Ends --> 
 
<!-- Chalk Pieces --><div id="whiteChalk_button"><img src="images/white.png" width="71" height="17" onclick="context.strokeStyle = '#FFFFFF';" /></div>     
 
<div id="redChalk_button"><img src="images/red.png" width="71" height="17" onclick="context.strokeStyle = '#F00000';" /> 
</div> 
 
<div id="orangeChalk_button"><img src="images/orange.png" width="71" height="17" onclick="context.strokeStyle = '#ff9600';" /> 
</div> 
<div id="yellowChalk_button"><img src="images/yellow.png" width="71" height="17" onclick="context.strokeStyle = '#fff600';" /></div> 
 
<div id="greenChalk_button"> 
<img src="images/green.png" width="71" height="17" onclick="context.strokeStyle = '#48ff00';" /></div> 
 
<div id="blueChalk_button"><img src="images/blue.png" width="71" height="17" onclick="context.strokeStyle = '#001eff';" /></div> 
<div id="pinkChalk_button"><img src="images/pink.png" width="71" height="17" onclick="context.strokeStyle = '#ff00d2';" /></div> 
 
</div> 
</div> 
</body> 
</html>

Schritt 8 Hinzufügen eines Radiergummis

Der Radierer ist einfach ein Bild, das dieselbe Strichfarbe hat wie das Rechteck, das wir im JavaScript '#424242' erstellt haben. Kopieren Sie den HTML-Code und fügen Sie ihn unter den Kreidestücken ein, die wir gerade oben erstellt haben.

1	<!-- Eraser -->
2	<div id="eraser" onclick="context.strokeStyle = '#424242'; context.lineWidth = '22';"></div>

Schritt 9 Stylen der Kreide und des Radiergummis

Fügen wir nun den Kreidestücken und dem Radiergummi etwas Styling hinzu, bevor wir weiterarbeiten. Fügen Sie Ihrer Datei styles.css Folgendes hinzu.

#redChalk_button { cursor:pointer; position:absolute; z-index:99999; top:620px; left:160px; } 
#greenChalk_button { cursor:pointer; position:absolute; z-index:99999; top:620px; left:400px; } 
#blueChalk_button { cursor:pointer; position:absolute; z-index:99999; top:620px; left:480px; } 
#yellowChalk_button { cursor:pointer; position:absolute; z-index:99999; top:620px; left:320px; } 
#orangeChalk_button { cursor:pointer; position:absolute; z-index:99999; top:620px; left:240px; } 
#pinkChalk_button { cursor:pointer; position:absolute; z-index:99999; top:620px; left:560px; } 
#whiteChalk_button { cursor:pointer; position:absolute; z-index:99999; top:620px; left:80px; } 
#eraser { 
 position:absolute; 
 background:url(../images/eraser.png) no-repeat; 
 left: 737px; 
 top: 568px; 
 width: 139px; 
 height: 67px; 
 z-index:99999; 
 cursor:pointer; 
 }

Schritt 10 Ändern des Hubgewichts

Das Ändern des Strichs ist genauso einfach wie das Ändern der Farbe im HTML. Alles was Sie tun müssen, ist die Funktion 'onclick' zu verwenden:

1	onclick="context.lineWidth = '1.0';"

'1.0' ist der kleinste zulässige Strich. Sie können den Hub beliebig erhöhen.

Fügen wir nun unserem HTML-Code einige Strichfunktionen hinzu. Kopieren Sie den folgenden Code und fügen Sie ihn in Ihr HTML-Dokument ein. Sie müssen dies außerhalb des 'blackboardPlaceholder' platzieren, unmittelbar nach dem schließenden div-Tag (bevor der Wrapper endet).

<!-- Toggle Stroke Weight --> 
<img src="images/toggle.png" width="16" height="16" id="stroke-subtract" title="Decrease Stroke" onclick="context.lineWidth--;" /> 
<img src="images/toggle-expand.png" width="16" height="16" id="stroke-add" title="Increase Stroke" onclick="context.lineWidth++;" /> 
 
<!-- Stroke Weight Panel --> 
<div id="strokeWeight"> 
<img src="images/stroke1.png" alt="1.0" class="stroke" width="30" height="32" onclick="context.lineWidth = '1.0';" /> 
<img src="images/stroke2.png" alt="6.0" class="stroke" width="30" height="32" onclick="context.lineWidth = '6.0';" /> 
<img src="images/stroke3.png" alt="9.0" class="stroke" width="30" height="32" onclick="context.lineWidth = '9.0';" /> 
<img src="images/stroke4.png" alt="13.0" class="stroke" width="30" height="32" onclick="context.lineWidth = '13.0';" /> 
</div>

Nun etwas CSS:

#stroke-subtract { 
 position:absolute; 
 top:436px; 
 left:-13px; 
 z-index:999999; 
 cursor:pointer; 
 } 
#stroke-add { 
   position:absolute; 
   top:436px; 
   left:5px; 
   z-index:999999; 
   cursor:pointer; 
   } 
#strokeWeight { 
 background:url(../images/stroke-style.png) no-repeat; 
 width:43px; 
 height:153px; 
 position:absolute; 
 top:456px; 
 left:-18px; 
 z-index:1; 
 padding:8px 0 0 7px; 
 } 
.stroke { cursor:pointer; margin-bottom:3px; }

Schritt 11 Die Speicherfunktion

Dies ist wahrscheinlich der komplexeste Abschnitt unseres Tutorials. Wir werden die image/data-JavaScript-Funktion verwenden, um unser Bild zu speichern. Aber zuerst brauchen wir eine Bildbibliothek. Wir werden das Canvas2Image und die Base64-Bibliothek verwenden, die von Jacob Seidelin unter nihilogic.dk erstellt wurden.

Wenn Sie dies noch nicht getan haben, können Sie diese Dateien hier herunterladen und in Ihrem 'js'-Ordner ablegen.

Wir müssen die Datei canvas.js ändern. Fügen Sie am Ende Ihrer Datei Folgendes hinzu.

window.onload = function() { 
var bMouseIsDown = false; 
 
   var oCanvas = document.getElementById("drawingCanvas"); 
   var oCtx = oCanvas.getContext("2d"); 
var iWidth = oCanvas.width; 
   var iHeight = oCanvas.height; 
function showDownloadText() { 
   document.getElementById("textdownload").style.display = "block"; 
   } 
function hideDownloadText() { 
   document.getElementById("textdownload").style.display = "none"; 
   } 
function convertCanvas(strType) { 
   if (strType == "PNG") 
   var oImg = Canvas2Image.saveAsPNG(oCanvas, true); 
   if (strType == "BMP") 
   var oImg = Canvas2Image.saveAsBMP(oCanvas, true); 
   if (strType == "JPEG") 
   var oImg = Canvas2Image.saveAsJPEG(oCanvas, true); 
 if (!oImg) { 
   alert("Sorry, this browser is not capable of saving." + strType + " files!"); 
   return false; 
   } 
oImg.id = "canvasimage"; 
 oImg.style.border = oCanvas.style.border; 
   oCanvas.parentNode.replaceChild(oImg, oCanvas); 
howDownloadText(); 
   } 
function saveCanvas(pCanvas, strType) { 
   var bRes = false; 
   if (strType == "PNG") 
   bRes = Canvas2Image.saveAsPNG(oCanvas); 
   if (strType == "BMP") 
   bRes = Canvas2Image.saveAsBMP(oCanvas); 
   if (strType == "JPEG") 
   bRes = Canvas2Image.saveAsJPEG(oCanvas); 
if (!bRes) { 
   alert("Sorry, this browser is not capable of saving " + strType + " files!"); 
   return false; 
   } 
   } 
document.getElementById("convertpngbtn").onclick = function() { 
   convertCanvas("PNG"); 
   } 
document.getElementById("resetbtn").onclick = function() { 
   var oImg = document.getElementById("canvasimage"); 
   oImg.parentNode.replaceChild(oCanvas, oImg); 
 hideDownloadText(); 
   }}

Wenn Sie auf die Schaltfläche Speichern klicken, wird Ihre Leinwand im Wesentlichen in ein PNG konvertiert, und von dort aus können Sie mit der rechten Maustaste klicken und das Bild herunterladen. Ziemlich ordentlich, oder?

Fügen wir nun den HTML-Code hinzu:

<!-- Save Image --> 
<div id="saveWrapper"> 
<div id="save"> 
<img src="images/save.png" alt="Save Image" width="16" height="16" id="convertpngbtn" title="Save Image" /> 
</div> 
<div id="textdownload"> 
 Right click the image to download. 
 <img src="images/cross.png" alt="Cancel" width="16" height="16" id="resetbtn" title="Continue Drawing" /> 
</div> 
</div>

Fügen Sie den obigen Code direkt nach dem Wrapper hinzu. Dadurch werden die Schaltflächen zum Speichern und Löschen erstellt. Jetzt werden wir das CSS hinzufügen, um es ein wenig zu gestalten.

#saveWrapper { position:absolute; right:0px; } 
#convertpngbtn { 
   float:right; 
   margin-right:40px; 
   margin-top:-10px; 
   position:relative; 
   z-index:9999; 
   cursor:pointer; 
   overflow:hidden; 
   } 
#textdownload { 
 display:none; 
 position:absolute; 
 font-family:Verdana, Geneva, sans-serif; 
 color:#000; 
 font-size:10px; 
 float:right; 
 margin-top:-10px; 
 right:91px; 
 width:250px; 
 overflow:hidden; 
 }

Fügen Sie diesen Code einfach dem Stylesheet styles.css hinzu.

Schritt 12 Die erweiterte Farbtabelle

Um mehr Flexibilität zu erreichen, sollten wir eine Farbtabelle erstellen, die der in Dreamweaver CS4 verwendeten ähnelt.

Um dies zu tun, dachte ich, es wäre eigentlich ganz einfach. Ich würde die obige Farbtabelle speichern und sie dann als Hintergrundbild einer Div-ID verwenden und dann im Inneren eine separate Div-Klasse für jede Farbe mit derselben Onclick-Funktion haben, die wir oben verwendet haben. Ich erkannte bald, dass dies nicht die beste Lösung war, da dies ein Durcheinander im HTML-Code verursachen und das Laden jedes Divs ewig dauern würde. Stattdessen habe ich eine neue Lösung gefunden, die ausschließlich aus JavaScript besteht. Ich würde jedes Div dynamisch in meiner JavaScript-Datei erstellen und den Farbcode für jedes 'color box' in ein Array einfügen. Bevor ich weiter erkläre, werden wir genau das tun. Öffnen Sie Ihre JavaScript-Datei, an der wir gearbeitet haben, und erstellen Sie ganz oben in der Datei direkt darunter eine Kontextvariable. Erstellen Sie eine neue Variable mit dem Namen "colorPalette". Dann beginnen wir mit dem Array. Jede neue Farbzeile wurde im JavaScript durch eine Leerzeichenzeile getrennt. Es gibt insgesamt zwölf Spalten, sodass wir insgesamt zwölf Abschnitte in unserem Array haben.

Hier ist das JavaScript:

1	var colorPalette = [ //Begin array of color table hex color codes.
2
3	"#000000","#000000","#000000","#000000","#003300","#006600","#009900","#00CC00","#00FF00","#330000","#333300","#336600","#339900","#33CC00","#33FF00","#660000","#663300","#666600","#669900","#66CC00","#66FF00",
4
5	"#000000","#333333","#000000","#000033","#003333","#006633","#009933","#00CC33","#00FF33","#330033","#333333","#336633","#339933","#33CC33","#33FF33","#660033","#663333","#666633","#669933","#66CC33","#66FF33",
6
7	"#000000","#666666","#000000","#000066","#003366","#006666","#009966","#00CC66","#00FF66","#330066","#333366","#336666","#339966","#33CC66","#33FF66","#660066","#663366","#666666","#669966","#66CC66","#66FF66",
8
9	"#000000","#999999","#000000","#000099","#003399","#006699","#009999","#00CC99","#00FF99","#330099","#333399","#336699","#339999","#33CC99","#33FF99","#660099","#663399","#666699","#669999","#66CC99","#66FF99",
10
11	"#000000","#CCCCCC","#000000","#0000CC","#0033CC","#0066CC","#0099CC","#00CCCC","#00FFCC","#3300CC","#3333CC","#3366CC","#3399CC","#33CCCC","#33FFCC","#6600CC","#6633CC","#6666CC","#6699CC","#66CCCC","#66FFCC",
12
13	"#000000","#FFFFFF","#000000","#0000FF","#0033FF","#0066FF","#0099FF","#00CCFF","#00FFFF","#3300FF","#3333FF","#3366FF","#3399FF","#33CCFF","#33FFFF","#6600FF","#6633FF","#6666FF","#6699FF","#66CCFF","#66FFFF",
14
15	"#000000","#FF0000","#000000","#990000","#993300","#996600","#999900","#99CC00","#99FF00","#CC0000","#CC3300","#CC6600","#CC9900","#CCCC00","#CCFF00","#FF0000","#FF3300","#FF6600","#FF9900","#FFCC00","#FFFF00",
16
17	"#000000","#00FF00","#000000","#990033","#993333","#996633","#999933","#99CC33","#99FF33","#CC0033","#CC3333","#CC6633","#CC9933","#CCCC33","#CCFF33","#FF0033","#FF3333","#FF6633","#FF9933","#FFCC33","#FFFF33",
18
19	"#000000","#0000FF","#000000","#990066","#993366","#996666","#999966","#99CC66","#99FF66","#CC0066","#CC3366","#CC6666","#CC9966","#CCCC66","#CCFF66","#FF0066","#FF3366","#FF6666","#FF9966","#FFCC66","#FFFF66",
20
21	"#000000","#FFFF00","#000000","#990099","#993399","#996699","#999999","#99CC99","#99FF99","#CC0099","#CC3399","#CC6699","#CC9999","#CCCC99","#CCFF99","#FF0099","#FF3399","#FF6699","#FF9999","#FFCC99","#FFFF99",
22
23	"#000000","#00FFFF","#000000","#9900CC","#9933CC","#9966CC","#9999CC","#99CCCC","#99FFCC","#CC00CC","#CC33CC","#CC66CC","#CC99CC","#CCCCCC","#CCFFCC","#FF00CC","#FF33CC","#FF66CC","#FF99CC","#FFCCCC","#FFFFCC",
24
25	"#000000","#FF00FF","#000000","#9900FF","#9933FF","#9966FF","#9999FF","#99CCFF","#99FFFF","#CC00FF","#CC33FF","#CC66FF","#CC99FF","#CCCCFF","#CCFFFF","#FF00FF","#FF33FF","#FF66FF","#FF99FF","#FFCCFF","#FFFFFF"
26
27	];

Und das ist jede Farbe in unserer Farbtabelle. Fügen wir nun das JavaScript hinzu, damit es funktioniert.

$(document).ready(function() { 
 // Handles showing/hiding the color table 
   $("#colorTable").hide(); 
 
   $("#color").click(function() { 
   $("#colorTable").show(); 
   }); 
   $(document).click(function() { 
   $("#colorTable").hide(); 
   }); 
   $("#color").click(function(event) { 
   event.stopPropagation(); 
   }); 
   }); 
function LoadColorTable() { // Populate the color picker table with colors specified in the 'colorPalette' array 
   for (i = 0; i < colorPalette.length; i++) { 
   var colorDiv = document.createElement("div"); 
   colorDiv.className = "color"; 
   colorDiv.id = "colorSwatch" + i; 
   colorDiv.style.backgroundColor = colorPalette[i]; 
   colorDiv.setAttribute("onclick", "SetColor(id);"); 
   document.getElementById("colorTable").appendChild(colorDiv); 
   }; 
   } 
function SetColor(id) { // Set the color of the drawing tool when a color swatch is clicked 
   context.strokeStyle = document.getElementById(id).style.backgroundColor; 
   }

Okay, im obigen Code fügen wir zunächst einige Funktionen hinzu, um die colorTable-ID in unserem HTML-Code anzuzeigen oder auszublenden (worauf wir gleich noch eingehen werden). Dies ist nur eine grundlegende Abfrage, wenn Sie auf die Farbtabelle klicken oder irgendwo außerhalb der Farbtabelle, wird die ID ausgeblendet. Jetzt laden wir die colorTable. Wenn Sie dies tun, füllen wir es mit allen Farbcodes, die wir im Array 'colorPalette' hinzugefügt haben. Und damit alles funktioniert, legen wir die Farbe des Zeichenwerkzeugs fest, wenn auf ein Farbfeld geklickt wird. Dazu machen wir einfach jede Farbe zu einer Klasse von 'color' und verwenden dann das Array, um jeden Hex-Farbwert zum Hintergrund zu machen. Und schließlich verwenden Sie eine Funktion. Wenn Sie auf eine Farbe klicken, entspricht der context.strokeStyle dem Hintergrundbild.

Und für das HTML-Markup fügen Sie den folgenden Code unmittelbar nach dem Start des Wrappers in Ihrem HTML hinzu.

<!-- Color Table (controlled in JavaScript) --> 
<div id="colorTable"></div> 
<!-- Toggle Color Button --> 
<div id="color" title="Toggle Color"> 
<img src="images/color-arrow.png" alt="Toggle Color" width="16" height="16" /> 
</div>

Und jetzt fügen wir unserer Farbtabelle etwas Stil hinzu.

#colorTable { 
 width:231px; 
 height:132px; 
 position:absolute; 
 margin-top:8px; 
 z-index:999999; 
 right:80px; 
 background-color: #000000; 
 display:none; 
 cursor:pointer; 
 } 
.color { 
   position:relative; 
   height:7px; 
   width:7px; 
   float:left; 
   padding:1px; 
   margin:1px; 
   } 
.color:hover{ border:solid 1px #FFF; margin:0px; }

Fügen Sie dies an einer beliebigen Stelle in Ihre Datei styles.css ein, die Sie vor einiger Zeit erstellt haben.

Und da hast du es! Jetzt haben wir über 200 verschiedene Farben zur Auswahl!

Schritt 13 Verwenden der Reload-Funktion zum Löschen der Leinwand

Jetzt erstellen wir eine einfache Schaltfläche zum Löschen der Leinwand. Der einfachste Weg, dies zu tun, ist einfach die Seite zu aktualisieren. Wir werden also eine Funktion verwenden, mit der Sie sicher alle vertraut sind. Wenn nicht, aktualisiert der folgende Code die Seite einfach mit JavaScript.

1	<a href="javascript:location.reload(true)">Clear</a>

Das ist es. Fügen wir es nun in unseren HTML-Code ein. Wir werden das Bild in Ihrem Ordner "images" verwenden, das wie das radioaktive Symbol aussieht. Ich bin mir nicht sicher, warum ich dafür ein radioaktives Symbol verwendet habe, aber ich konnte kein anderes Symbol im Symbolpaket finden, das verwendet werden kann. Dies wird also ausreichen.

Fügen Sie das folgende Bild zu Ihrem HTML-Code hinzu. Da es eine absolute Position hat, spielt es keine Rolle, wo Sie es platzieren, solange Sie es außerhalb des 'blackboardPlaceholder' und innerhalb des 'wrapper' platzieren. Damit der Code "in der richtigen Reihenfolge" aussieht, setzen wir den folgenden Code direkt nach unserer ID "color".

<!-- Clear Canvas Button --> 
<div id="nuke" title="Clear Canvas"> 
<a href="javascript:location.reload(true)"> 
<img src="images/burn.png" alt="Clear Canvas" width="16" height="16" /> 
</a> 
</div>

Und natürlich etwas CSS:

1	#nuke { position:absolute; cursor:pointer; margin-top:-10px; right:100px; }

Und da hast du es. Ein gut aussehender "klarer" Knopf.

Schritt 14 Hinzufügen einer zusätzlichen Funktion zum Strichmenü

Nachdem ich diese Zeichenanwendung abgeschlossen hatte, hatte ich immer noch das Gefühl, dass das Gewicht der Striche, die Sie auswählen konnten, immer noch etwas gering war. Also dachte ich mir, ich würde dafür eine neue kleine Funktion machen. Ich werde das Strichmenü, das wir derzeit bereits haben, nicht entfernen, sondern es einfach ein wenig ergänzen. Meine Idee war, einen Plus- und einen Minus-Knopf zu haben. Die Plus-Taste würde das Strichgewicht um eins erhöhen, und die Minus-Taste würde den Hub offensichtlich um eins verringern.

Zu diesem Zweck finden wir in unserem Icon-Pack einige nette Plus- und Minus-Schaltflächen. Wir werden dann den HTML-Schreibzugriff über die ID 'storkeWeight' schreiben.

<!-- Toggle Stroke Weight -->

<img src="images/toggle.png" width="16" height="16" id="stroke-subtract" title="Decrease Stroke" onclick="context.lineWidth--;" />

<img src="images/toggle-expand.png" width="16" height="16" id="stroke-add" title="Increase Stroke" onclick="context.lineWidth++;" />

Die Onclick-Funktion unterscheidet sich ein wenig von der zuvor verwendeten. Im Grunde genommen addieren oder subtrahieren die Werte '-' und '++' einfach 1 vom Standardwert. Der Standardwert ist 1.0. Wenn Sie also auf die Plus-Schaltfläche klicken, ist der Strich jetzt 2.0, etwas größer als der Standardwert.

Und jetzt das CSS:

#stroke-subtract { 
 position:absolute; 
 top:436px; 
 left:-13px; 
 z-index:999999; 
 cursor:pointer; 
 } 
#stroke-add { 
   position:absolute; 
   top:436px; 
   left:5px; 
   z-index:999999; 
   cursor:pointer; 
   }

Schritt 15 Hinzufügen der Tooltips

Um die Anwendung benutzerfreundlicher zu gestalten, müssen wir allen unseren Schaltflächen einige Titel hinzufügen. Zum Glück habe ich bereits den gesamten Code in den HTML-Code aufgenommen, Sie haben es einfach nicht bemerkt. Grundsätzlich haben alle unsere Symbole im HTML-Code das Titel-Tag. Sie alle sollten wissen, was Titel-Tags sind, aber wir werden diese Tags verwenden, um einen ziemlich netten jQuery-Tooltip-Effekt zu implementieren, der als Tipsy bekannt ist. Ich habe Tipsy schon oft in anderen Projekten verwendet und es ist wirklich ein großartiges Plugin. Sie müssen die Tipsy-Dateien hier herunterladen. Platzieren Sie die Datei 'tipsy.css' in Ihrem CSS-Ordner, die Datei 'jquery.tipsy.js' in Ihrem Ordner js und die Datei 'tipsy.gif' in Ihrem Bilderordner, falls sie noch nicht vorhanden ist.

Sie müssen die jQuery-Bibliothek zu Ihrem Header hinzufügen. Hier ist der direkte Link zur neuesten jQuery-Bibliothek. Sie können direkt darauf verlinken oder es in Ihren 'js'-Ordner herunterladen:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Jetzt müssen wir die JavaScript-Datei für beschwipst aufrufen. Stellen Sie sicher, dass beim Aufrufen in Ihrem Header das jQuery-Skript vor diesem Skript steht. Es sollte so aussehen:

1	<script type="text/javascript" src="js/jquery.tipsy.js"></script>

Rufen Sie dann die Datei 'tipsy.css' in Ihrem HTML-Code auf. Das sollte wie folgt aussehen:

1	<link rel="stylesheet" type="text/css" href="css/tipsy.css" />

Und jetzt nennen wir das eigentliche JavaScript. Platzieren Sie dies in Ihrer Kopfzeile unter allen externen JavaScript- und CSS-Quellen.

<script type='text/javascript'> 
 $(function() { 
 $('#nuke').tipsy({gravity: 's'}); 
 $('#color').tipsy({gravity: 's'}); 
 $('#convertpngbtn').tipsy({gravity: 's'}); 
 $('#resetbtn').tipsy({gravity: 's'}); 
 $('#stroke-subtract').tipsy({gravity: 's'}); 
 $('#stroke-add').tipsy({gravity: 's'});  }); 
 </script>

Sie müssen Ihrer Datei styles.css noch eine weitere Sache hinzufügen, um die Tooltips ein wenig zu verbessern:

.tooltip{ 
 position: absolute; 
 top: 0; 
 left: 0; 
 z-index: 3; 
 display: none; 
 background-color:#F00; 
 }

Verpacken Sie es

Und das fasst es fast zusammen! Herzliche Glückwünsche. Bitte lassen Sie mich wissen, wenn Sie Fragen oder Anregungen zur Verbesserung dieser Anwendung haben. Danke fürs Lesen!