Introduction détaillée à la nouvelle étiquette HTML5 Canvas

1. Présentation

Canvas est utilisé pour afficher des images sur pages Web, et le contenu peut être personnalisé. Fondamentalement, il s'agit d'un bitmap qui peut être utilisé avec JavaScript

Canvas API est utilisé pour générer des images en temps réel. sur les pages Web. JavaScript. Manipulez le contenu des images via l'API. Les avantages de ceci sont : la réduction du nombre de requêtes HTTP, la réduction des données téléchargées, l'accélération du temps de chargement des pages Web et la possibilité de traiter les images en temps réel

Avant de l'utiliser, vous devez d'abord créer un élément de page Web Canvas.

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

Si le navigateur ne prend pas en charge Canvas, le texte au milieu de la balise Canvas sera affiché - "Votre navigateur. ne prend pas en charge le canevas !" Ensuite,

Utilisez JavaScript

pour obtenir l'

objet DOM du canevas. Ensuite, vérifiez si le navigateur prend en charge l'API Canvas en voyant si la méthode getContext est déployée. Utilisez la méthode getContext('2d') pour initialiser le contexte de l'image plate

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

Maintenant, l'image plate est générée au milieu du canevas. 2. Dessin. Méthode

(1) Couleur de remplissage

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

Définir la couleur de remplissage

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

(2) Dessiner un rectangle

Dessine un solide.

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

Dessine un rectangle creux

Efface le contenu d'une zone rectangulaire <🎜. > (3) Tracer des chemins

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

(4) Dessiner des cercles et des secteurs

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

Méthodes de dessin de secteurs >Les paramètres x et y de la méthode de l'arc sont. les coordonnées du centre du cercle, radius est le rayon, startAngle et endAngle sont l'angle de départ et l'angle de fin du secteur (exprimé en degrés), dans le sens inverse des aiguilles d'une montre indique si le dessin doit être dessiné dans le sens inverse des aiguilles d'une montre (vrai) ou dans le sens des aiguilles d'une montre. Dessin de l'aiguille des heures (faux).

dessine un cercle plein

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

dessine un cercle creux (5) Dessiner du texte

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

La méthode fillText est. utilisé pour ajouter du texte, et la méthode StrokeText est utilisée pour ajouter des mots creux Avant utilisation, vous devez définir la police, la direction du texte, la couleur et d'autres attributs

Le. La méthode fillText ne prend pas en charge les sauts de ligne de texte, c'est-à-dire que tout le texte apparaît sur une seule ligne, donc si vous souhaitez générer plusieurs lignes de texte, vous ne pouvez appeler la méthode fillText que plusieurs fois.

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

2.1 Dégradé

Définissez la couleur du dégradé.

ctx.beginPath();

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

ctx.fillStyle = "#000000";

ctx.fill();

La référence de la méthode createLinearGradient est (x1, y1, x2, y2), où x1 et y1 sont les coordonnées du point de départ, et x2 et y2 sont les coordonnées du point final. Grâce à différentes valeurs de coordonnées, des dégradés de haut en bas, de gauche à droite, etc. peuvent être générés.

ctx.beginPath();

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

ctx.lineWidth = 1.0;

ctx.strokeStyle = "#000";

ctx.stroke();

Les paramètres de la méthode addColorStop sont (offset, color), où offset est une valeur à virgule flottante allant de 0.0 à 1.0, représentant la partie entre le point de départ et le point final du dégradé, offset 0 correspond au point de départ, offset est 1 correspondant au point final et color est une représentation sous forme de chaîne de la valeur de couleur CSS.

La méthode d'utilisation est la suivante :

2.2 Ombre

3,

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

Traitement d'image

Méthode

3.1 Insérer une image

canvas vous permet d'insérer des fichiers image dans le canevas. Après avoir lu l'image, utilisez la méthode drawImage pour la redessiner dans le canevas.

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

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

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

Étant donné que le chargement de l'image prend du temps, la méthode drawImage ne peut être appelée qu'une fois l'image complètement chargée, le code ci-dessus doit donc être réécrit. La méthode

drawImage() accepte trois paramètres. Le premier paramètre est l'élément DOM du fichier image (c'est-à-dire

balise img

ctx.fillStyle = myGradient;

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

) et le deuxième paramètre. is Le troisième paramètre est la coordonnée du coin supérieur gauche de l'image dans l'élément canevas. (0, 0) dans l'exemple ci-dessus signifie placer le coin supérieur gauche de l'image dans le coin supérieur gauche de l'élément canevas.

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.2 Lire le contenu de Canvas

La méthode getImageData peut être utilisée pour lire le contenu de Canvas et renvoyer un objet contenant les informations de chaque pixel.

L'objet imageData a un attribut data et sa valeur est un

tableau unidimensionnel

. La valeur de ce tableau correspond aux valeurs des canaux rouge, vert, bleu et alpha de chaque pixel en séquence. Par conséquent, la longueur du tableau est égale à la largeur des pixels de l'image * la hauteur des pixels de l'image * 4. , et la plage de chaque valeur est comprise entre 0 et 255. Ce tableau est non seulement lisible, mais également inscriptible, donc en manipulant les valeurs de ce tableau, vous pouvez atteindre l'objectif d'exploitation des images. Après avoir modifié ce tableau, utilisez la méthode putImageData pour réécrire le contenu du tableau sur le canevas.

var img = new Image();

img.src = "image.png";

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

3.3 Traitement des pixels

var image = new Image();

image.onload = function() {    if (image.width != canvas.width) {
        canvas.width = image.width;
    }    if (image.height != canvas.height) {
        canvas.height = image.height;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.drawImage(image, 0, 0);

}

image.src = "image.png";

En supposant que le filtre est une

fonction qui traite les pixels, alors l'ensemble du processus de traitement du Canvas peut être représenté par le code suivant .

Voici plusieurs méthodes de traitement courantes.

（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);

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!