Mit Canvas können Sie programmgesteuert auf Ihre Webseite zeichnen:
Leinwandzeichnungen können umfangreich gestaltet werden:
Zeichnungen können kombiniert und an beliebiger Stelle auf der Leinwand positioniert werden.
Mit Canvas können Sie die Komponentenfarben Rot, Grün, Blau und Alpha der Bilder bearbeiten. Auf diese Weise kann die Leinwand Bilder mit ähnlichen Ergebnissen wie Photoshop bearbeiten.
Verschieben und Bearbeiten von Leinwandzeichnungen (z. B. zum Erstellen eines Action-Spiels):
Die Größe einer Leinwand ist der Bereich, den sie auf der Seite einnimmt, und wird durch die CSS-Eigenschaften width und height definiert.
canvas {
width : 1000px;
height : 1000px;
}
Die Leinwandauflösung bestimmt die Anzahl der Pixel, die darin enthalten sind. Die Auflösung wird durch Festlegen der Eigenschaften für die Breite und Höhe des Canvas-Elements festgelegt. Wenn nicht angegeben, beträgt die Leinwand standardmäßig 300 x 150 Pixel.
Die folgende Leinwand verwendet die obige CSS-Größe. Da jedoch width
und height
nicht angegeben werden, beträgt die Auflösung 300 x 150.
<canvas id="my-canvas"></canvas>
Dies führt dazu, dass jedes Pixel ungleichmäßig gedehnt wird. Der Pixel-Aspekt ist 1: 2. Wenn die Leinwand gedehnt wird, verwendet der Browser eine bilineare Filterung. Dies hat den Effekt, dass gestreckte Pixel unscharf werden.
Stellen Sie für die besten Ergebnisse bei der Verwendung der Leinwand sicher, dass die Auflösung der Leinwand der Anzeigegröße entspricht.
Folgen Sie dem CSS-Stil oben, um die Anzeigegröße anzupassen, und fügen Sie die Leinwand mit width
und height
auf dieselbe Pixelanzahl wie der Stil definiert hinzu.
<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>
In diesem Beispiel wird gezeigt, wie die Mausposition relativ zur Zeichenfläche (0,0)
wird, sodass (0,0)
die obere linke Ecke der HTML5-Zeichenfläche ist. e.clientX
und e.clientY
erhalten die e.clientY
relativ zum oberen e.clientY
des Dokuments. Um dies zu ändern, werden die left
und right
Positionen der Leinwand vom Client X und Y abgezogen.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";
canvas.addEventListener("mousemove", function(e) {
var cRect = canvas.getBoundingClientRect(); // Gets CSS pos, and width/height
var canvasX = Math.round(e.clientX - cRect.left); // Subtract the 'left' of the canvas
var canvasY = Math.round(e.clientY - cRect.top); // from the X/Y positions to make
ctx.clearRect(0, 0, canvas.width, canvas.height); // (0,0) the top left of the canvas
ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});
Die Verwendung von Math.round
soll sicherstellen, dass die x,y
Positionen ganze Zahlen sind, da das Begrenzungsrechteck der Leinwand möglicherweise keine ganzzahligen Positionen hat.
HTML
<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>
Javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);
Ergebnis
Html5-Canvas ...
Beispiel: Erstellen Sie ein Html5-Canvas-Element mit Html5-Markup und JavaScript:
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvasHtml5{border:1px solid red; }
#canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){
// add a canvas element using javascript
var canvas=document.createElement('canvas');
canvas.id='canvasJavascript'
document.body.appendChild(canvas);
}); // end $(function(){});
</script>
</head>
<body>
<!-- add a canvas element using html -->
<canvas id='canvasHtml5'></canvas>
</body>
</html>
Wenn Sie mit der Leinwand arbeiten, benötigen Sie oft eine Leinwand, um einige Pixeldaten aufzunehmen. Es ist einfach, eine Leinwand außerhalb des Bildschirms zu erstellen, um einen 2D-Kontext zu erhalten. Ein Offscreen-Canvas verwendet auch die verfügbare Grafikhardware zum Rendern.
Mit dem folgenden Code wird einfach eine Leinwand erstellt und mit blauen Pixeln gefüllt.
function createCanvas(width, height){
var canvas = document.createElement("canvas"); // create a canvas element
canvas.width = width;
canvas.height = height;
return canvas;
}
var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);
Oft wird die Leinwand außerhalb des Bildschirms für viele Aufgaben verwendet, und Sie haben möglicherweise viele Leinwände. Um die Verwendung der Leinwand zu vereinfachen, können Sie den Leinwandkontext an die Leinwand anhängen.
function createCanvasCTX(width, height){
var canvas = document.createElement("canvas"); // create a canvas element
canvas.width = width;
canvas.height = height;
canvas.ctx = canvas.getContext("2d");
return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);
Das rotate(r)
Verfahren des 2D - Kontextes dreht die Leinwand durch den angegebenen Betrag r
von Radianten um den Ursprung.
HTML
<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<button type="button" onclick="rotate_ctx();">Rotate context</button>
Javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);
rotate_ctx = function() {
// translate so that the origin is now (ox, oy) the center of the canvas
ctx.translate(ox, oy);
// convert degrees to radians with radians = (Math.PI/180)*degrees.
ctx.rotate((Math.PI / 180) * 15);
ctx.fillText("Hello World", 0, 0);
// translate back
ctx.translate(-ox, -oy);
};
Sie können eine Leinwand in einer Bilddatei speichern, indem Sie die Methode canvas.toDataURL()
, die den Daten-URI für die Bilddaten der Leinwand zurückgibt.
Die Methode kann zwei optionale Parameter canvas.toDataURL(type, encoderOptions)
: type
ist das Bildformat (wenn weggelassen, lautet der Standardwert image/png
). encoderOptions
ist eine Zahl zwischen 0 und 1, die die Bildqualität angibt (Standardeinstellung ist 0,92).
Hier zeichnen wir eine Leinwand und hängen den Daten-URI der Leinwand an den Link "Download to myImage.jpg" an.
HTML
<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>
Javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);
download_img = function(el) {
// get image URI from canvas object
var imageURI = canvas.toDataURL("image/jpg");
el.href = imageURI;
};
Live-Demo auf JSfiddle.