Detaillierte Einführung in das neue HTML5-Label Canvas

1. Übersicht

Canvas wird zum Anzeigen von Bildern verwendet Webseiten, und der Inhalt kann angepasst werden. Im Grunde handelt es sich um eine Bitmap, die mit JavaScript bedient werden kann, um Bilder in Echtzeit zu generieren auf Webseiten. Die Vorteile davon sind: Reduzierung der Anzahl von HTTP-Anfragen, Beschleunigung der Ladezeit von Webseiten und Ermöglichung der Echtzeitverarbeitung von Bildern >Bevor Sie es verwenden, müssen Sie zunächst ein Webseitenelement erstellen.

Wenn der Browser Canvas nicht unterstützt, wird der Text in der Mitte des Canvas-Tags angezeigt: „Ihr Browser unterstützt Canvas nicht!" Dann Verwenden Sie JavaScript

, um das

DOM-Objekt

des Canvas abzurufen. Überprüfen Sie als Nächstes, ob der Browser die Canvas-API unterstützt, indem Sie prüfen, ob die Methode getContext bereitgestellt ist.

<canvas id="myCanvas" width="400" height="200">
    您的浏览器不支持canvas!
</canvas>

Verwenden Sie die Methode getContext('2d'), um den Kontext des flachen Bildes zu initialisieren

Jetzt wird das flache Bild in der Mitte der Leinwand generiert 2. Zeichnen. Methode (1) Füllfarbe

Füllfarbe festlegen

var canvas = document.getElementById('myCanvas');

if (canvas.getContext) {    //some code here}

(2) Ein Rechteck zeichnen

var ctx = canvas.getContext('2d');

Zeichnet ein Rechteck.

Zeichnet ein hohles Rechteck.

ctx.fillStyle = "#000000";//设置填充色为黑色ctx.strokeStyle = "#FF6600"; //设置笔触颜色

Löscht den Inhalt eines rechteckigen Bereichs > (3) Pfade zeichnen

(4) Kreise und Sektoren zeichnen

ctx.fillStyle = "#000000";//填充颜色，即矩形颜色ctx.fillRect(x, y, width, height);

Methoden zum Zeichnen von Sektoren >Die x- und y-Parameter der Bogenmethode sind die Koordinaten des Mittelpunkts des Kreises, radius ist der Radius, startAngle und endAngle sind der Start- und Endwinkel des Sektors (ausgedrückt in Grad), anticlock gibt an, ob die Zeichnung gegen den Uhrzeigersinn (wahr) oder im Uhrzeigersinn gezeichnet werden soll Stundenzeigerzeichnung (falsch).

zeichnet einen ausgefüllten Kreis

ctx.strokeStyle = "#FF6600"; //笔触颜色，即矩形边框颜色ctx.strokeRect(x, y, width, height);

zeichnet einen leeren Kreis (5) Zeichne Text

Die fillText-Methode ist Wird zum Hinzufügen von Text verwendet, und die Methode „StrokeText“ wird zum Hinzufügen von Hohlwörtern verwendet. Vor der Verwendung müssen Sie die Schriftart, die Textrichtung, die Farbe und andere

ctx.clearRect(x, y, width, height);

Attribute festlegen Die Methode fillText unterstützt keinen Textzeilenumbruch, d. h. der gesamte Text wird in einer Zeile angezeigt. Wenn Sie also mehrere Textzeilen generieren möchten, können Sie die Methode fillText nur mehrmals aufrufen.

2.1 Verlauf

ctx.beginPath(); //开始路径绘制
ctx.moveTo(20, 20); //设置路径起点
ctx.lineTo(200, 20); //绘制一条到200， 20的直线
ctx.lineWidth = 1.0; //设置线宽
ctx.strokeStyle = "#CC0000"; //设置线的颜色
ctx.stroke(); //进行线的着色，这时整条线才变得可见

Legen Sie die Verlaufsfarbe fest.

Die Referenz der Methode createLinearGradient ist (x1, y1, x2, y2), wobei x1 und y1 die Startpunktkoordinaten und x2 und y2 die Endpunktkoordinaten sind. Durch unterschiedliche Koordinatenwerte können Verläufe von oben nach unten, von links nach rechts usw. erzeugt werden.

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

Die Parameter der addColorStop-Methode sind (Offset, Farbe), wobei Offset ein Gleitkommawert im Bereich von 0,0 bis 1,0 ist, der den Teil zwischen dem Startpunkt und dem Endpunkt des Farbverlaufs darstellt. Offset 0 entspricht dem Startpunkt, Offset ist 1 entsprechend dem Endpunkt und Farbe ist eine Zeichenfolgendarstellung des CSS-Farbwerts.

Die Verwendungsmethode ist wie folgt:

ctx.beginPath();

ctx.arc(60, 60, 50, 0, Math.PI*2, true);

ctx.fillStyle = "#000000";

ctx.fill();

2.2 Schatten

3,

ctx.beginPath();

ctx.arc(60, 60, 50, 0, Math.PI*2, true);

ctx.lineWidth = 1.0;

ctx.strokeStyle = "#000";

ctx.stroke();

Bildverarbeitung

Methode 3.1 Bild einfügen

Leinwand ermöglicht das Einfügen von Bilddateien in die Leinwand. Nachdem Sie das Bild gelesen haben, verwenden Sie die Methode „drawImage“, um es in der Leinwand neu zu zeichnen.

ctx.font = "Bold 20px Arial"; //设置字体
ctx.textAlign = "left"; //设置对齐方式
ctx.fillStyle = "#008600"; //设置填充颜色
ctx.fillText("Hello!", 10, 50); //设置字体内容，以及在画布上的位置
ctx.strokeText("Hello!", 10, 100); //绘制空心字

Da das Laden des Bildes Zeit braucht, kann die drawImage-Methode erst aufgerufen werden, nachdem das Bild vollständig geladen ist, sodass der obige Code neu geschrieben werden muss. Die Methode

drawImage() akzeptiert drei Parameter. Der erste Parameter ist das DOM-Element der Bilddatei (d. h.

img-Tag

var myGradient = ctx.createLinearGradient(0, 0, 0, 160);

myGradient.addColorStop(0, "#BABABA");

myGradient.addColorStop(1, "#636363");

) und der zweite Parameter Der dritte Parameter ist die Koordinate der oberen linken Ecke des Bildes im Canvas-Element (0, 0). Im obigen Beispiel bedeutet dies, dass die obere linke Ecke des Bildes in der oberen linken Ecke des Canvas-Elements platziert wird.

3.2 Den Inhalt von Canvas lesen

Die Methode getImageData kann verwendet werden, um den Inhalt von Canvas zu lesen und ein Objekt zurückzugeben, das Informationen zu jedem Pixel enthält.

ctx.fillStyle = myGradient;

ctx.fillRect(10, 10, 200, 100);

Das imageData-Objekt verfügt über ein Datenattribut und sein Wert ist ein

eindimensionales Array

. Der Wert dieses Arrays besteht aus den Rot-, Grün-, Blau- und Alphakanalwerten jedes Pixels nacheinander. Daher ist die Länge des Arrays gleich der Pixelbreite des Bildes * der Pixelhöhe des Bildes * 4 , und der Bereich jedes Werts liegt zwischen 0 und 255. Dieses Array ist nicht nur lesbar, sondern auch beschreibbar. Durch Bearbeiten der Werte dieses Arrays können Sie also den Zweck der Bildbearbeitung erreichen. Nachdem Sie dieses Array geändert haben, verwenden Sie die Methode putImageData, um den Array-Inhalt zurück in den Canvas zu schreiben.

ctx.shadowOffsetX = 10; //设置水平位移
ctx.shadowOffsetY = 10; //设置垂直位移
ctx.shadowBlur = 5; //设置模糊度
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; //设置阴影颜色
ctx.fillStyle = "#CC0000";

ctx.fillRect(10, 10, 200, 100);

3.3 Pixelverarbeitung

Angenommen, der Filter ist eine

Funktion

, die Pixel verarbeitet, dann kann der gesamte Canvas-Verarbeitungsprozess durch den folgenden Code dargestellt werden .

var img = new Image();

img.src = "image.png";

ctx.drawImage(img, 0, 0); //设置对应的图像对象，以及它在画布上的位置

Im Folgenden sind einige gängige Verarbeitungsmethoden aufgeführt.

（1）灰度效果

灰度图（grayscale）就是取红、绿、蓝三个像素值的算术平均值，这实际上将图像转成了黑白形式。假定d[i]是像素数组中一个像素的红色值，则d[i+1]为绿色值，d[i+2]为蓝色值，d[i+3]就是alpha通道值。转成灰度的算法，就是将红、绿、蓝三个值相加后除以3，再将结果写回数组。

grayscale = function(pixels) {    
var d = pixels.data;    
for (var i = 0; i < d.length; i += 4) {        
var r = d[i];        
var g = d[i + 1];        
var b = d[i + 2];
        d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3;
    }    return pixels;

}

（2）复古效果

复古效果（sepia）则是将红、绿、蓝三个像素，分别取这三个值的某种加权平均值，使得图像有一种古旧的效果。

sepia = function(pixels) {    
var d = pixels.data;    
for (var i = 0; i < d.length; i +=4) {        
var r = d[i];        
var g = d[i + 1];        
var b = d[i + 2];
        d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189); //red
        d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168); //green
        d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131); //blue    
        }    
        return pixels;

}

（3）红色蒙版效果

红色蒙版指的是，让图像呈现一种偏红的效果。算法是将红色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为0。

red = function(pixels) {    
var d = pixels.data;    
for (var i = 0; i < d.length; i += 4) {        
var r = d[i];        
var g = d[i + 1];        
var b = d[i + 2];
        d[i] = (r + g + b) / 3; //红色通道取平均值
        d[i + 1] = d[i + 2] = 0;
    }    return pixels;

}

（4）亮度效果

亮度效果（brightness）是指让图像变得更亮或更暗。算法将红色通道、绿色通道、蓝色通道，同时加上一个正值或负值。

brightness = function(pixels, delta) {    
var d = pixels.data;    
for (var i = 0; i < d.length; i += 4) {
        d[i] += delta; //red
        d[i + 1] += delta; //green
        d[i + 2] += delta; //blue    
        }    
        return pixels;

}

（5）反转效果

反转效果（invert）是指图片呈现一种色彩颠倒的效果。算法为红、绿、蓝通道都取各自的相反值（255 - 原值）。

invert = function(pixels) {    
var d = pixels.data;    
    for (var i = 0; i < d.length; i += 4) {
        d[i] = 255 - d[i];
        d[i + 1] = 255 - d[i + 1];
        d[i + 2] = 255 - d[i + 2];
    }    return pixels;

}

3.4 将Canvas转化为图像文件

对图像数据作出修改以后，可以使用toDataURL方法，将Canvas数据重新转化成一般的图像文件形式。

<p style="margin-bottom: 7px;">function convertCanvasToImage(canvas) {    <br/>var image = new Image();<br/>    image.src = canvas.toDataURL("image/png");    <br/>    return image;<br/>}</p>

4、保存和恢复上下文

save方法用于保存上下文环境，restore方法用于恢复到上一次保存的上下文环境。

ctx.save();

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

ctx.fillStyle = "#CC0000";
ctx.fillRect(10, 10, 150, 150);

ctx.restore();

ctx.fillStyle = "#000000";
ctx.fillRect(180, 10, 150, 100);

 上面的代码一共绘制了两个矩形，前一个有阴影，后一个没有。

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das neue HTML5-Label Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!