Canvas fait partie de HTML5 et permet aux langages de script de restituer dynamiquement des images. Canvas définit une zone. La largeur et la hauteur de la zone peuvent être définies par des attributs HTML. Le code JavaScript peut accéder à la zone et restituer des rendus dynamiques sur la page Web via un ensemble complet de fonctions de dessin (API).
2. Ce que Canvas peut faireJeux : Il ne fait aucun doute que les jeux jouent un rôle important dans le domaine du HTML5. HTML5 est plus tridimensionnel et plus sophistiqué que Flash en termes d'affichage d'images sur le Web.
Production de graphiques : la production de graphiques est souvent ignorée par les gens, mais la communication et la coopération au sein d'une entreprise ou entre entreprises sont indissociables des graphiques. Certains développeurs utilisent désormais HTML/CSS pour créer des icônes. Bien entendu, utiliser SVG (Scalable Vector Graphics) pour réaliser la production de graphiques est également un très bon moyen.
Conception des polices : le rendu personnalisé des polices sera entièrement basé sur le Web et mis en œuvre à l’aide de la technologie HTML5.
Editeur graphique : L'éditeur graphique peut être 100% web.
D'autres contenus peuvent être intégrés au site Web : comme les graphiques, l'audio, la vidéo et de nombreux autres éléments, ils peuvent être mieux intégrés au Web et ne nécessitent aucun plug-in.
3. Utilisation de base de Canvas1. Lorsque vous utilisez <canvas>, vous devez d'abord définir ses attributs de largeur et de hauteur et spécifier la taille de la zone dessinable. Si vous spécifiez uniquement la largeur et la hauteur sans ajouter de styles ni dessiner d'images, l'élément ne sera pas visible sur la page. .
<canvas id='draw' width='200px' height='200px'></canvas>
2. Pour dessiner une image, nous devons d'abord obtenir le canevas et appeler la méthode getContext(), puis transmettre le nom du contexte (2D/3D a deux opérations de dessin de base | fill (fillStyle) | ) | La valeur par défaut de ces deux propriétés est #000
var draw = document.getElementById('draw'); //Confirmez si le navigateur prend en charge l'élément <canvas> if(draw.getContext){ var context = draw.getContext('2d'); le contexte context.StrokeStyle = '#f00'; //La couleur de la prairie intérieure remplie context.fillStyle = '#0f0';}3. Utilisez la méthode toDataURL() pour exporter l'image dessinée sur l'élément <canvas>.
var draw = document.getElementById('draw');if(draw.getContext){ //Affiche l'image, toDataURL() obtient une chaîne de chaîne base64 var drawURL = draw.toDataURL('image/png') ; = document.createElement('img'); image.src = drawURL; document.body.appendChild(image);4. Il existe trois méthodes principales pour dessiner un rectangle : fillRect() est la couleur de remplissage du rectangle, StrokeRect() est le trait du rectangle et clearRect() efface le rectangle. Ces trois méthodes reçoivent toutes 4 paramètres x/y/w/h, les coordonnées du coin supérieur gauche du rectangle ainsi que la largeur et la hauteur.
var draw = document.getElementById('draw'); //Confirmez si le navigateur prend en charge l'élément <canvas> if(draw.getContext){ var context = draw.getContext('2d'); //Dessinez un rectangle rouge et un contour vert Edge context.fillStyle = '#f00'; context.StrokeStyle = '#0f0' context.StrokeRect(10,10,50,50); context.fillRect(10,10,50,50); //Dessine un rectangle vert avec un trait rouge context.fillStyle = '#0f0'; context.StrokeStyle = '#f00'; , 50); contexte.fillRect(10,10,50,50); //Efface un petit rectangle là où les deux rectangles se chevauchent context.clearRect(40,40,10,10);}5. Dessinez des chemins. Des formes et des lignes complexes peuvent être créées via des chemins. Pour dessiner un chemin, appelez d'abord la méthode startPath(), puis utilisez la méthode suivante pour dessiner le chemin.
arc (x, y, rayon, angle de départ, angle de fin, dans le sens inverse des aiguilles d'une montre)
(x, y) coordonnées du centre du cercle, rayon, (startAngle, endAngle) angle de départ et angle de fin, dans le sens inverse des aiguilles d'une montre (faux)/dans le sens inverse des aiguilles d'une montre (vrai)
moveTo(x,y) déplace le curseur vers (x,y) sans tracer de ligne. Peut être utilisé pour modifier les coordonnées dites du point précédent*
arcVers(x1,y1,x2,y2,rayon)
Tracer une courbe partant du point précédent jusqu'à (x2, y2) et passant par (x1, y1) avec le rayon donné
lineTo(x,y) trace une ligne droite du point précédent à (x,y)
rect(x,y,largeur,hauteur)
Dessinez un rectangle commençant par (x, y), avec la largeur et la hauteur comme largeur et hauteur. Cette méthode dessine un chemin rectangulaire au lieu des formes indépendantes dessinées par StrokeRect() et fillRect().
// Ensuite, dessinez une horloge sans chiffres var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); //Démarrer le chemin context.beginPath( ); /Dessinez le cercle extérieur context.arc(100,100,99,0,2*Math.PI,false); //Dessinez le cercle intérieur context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Dessinez l'aiguille des minutes context.moveTo(100,100); ,15) ; //Dessine l'aiguille des heures context.moveTo(100,100); //Chemin du trait context.Stroke(); context.StrokeStyle = '#f00';6. Il existe deux méthodes principales pour dessiner du texte, fillText() et StrokeText(), qui reçoivent toutes deux quatre paramètres |text (texte à dessiner)|x|y|largeur maximale des pixels (facultatif)|. basé sur les trois attributs suivants
style de texte de police, taille, police, etc.
textAlign alignement du texte |début|fin|gauche|droite|centre|
textBaseline La ligne de base du texte|top|hanging|middle|alphabetic|ideographic|bottom|
//Dessinez 12 heures sur le cadran context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText('12',100,20);7. Transformations
rotate(angel) fait pivoter l'angle de l'image en radians autour de l'origine
scale(scaleX,scaleY) met à l'échelle l'image, x*scaleX,y*scaleY est par défaut 1
translation(x,y) déplace l'origine des coordonnées vers (x,y)
var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //Démarrer le chemin context.beginPath(); 100,100,99,0,2*Math.PI,false); //Dessine le cercle intérieur context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Transformer l'origine context.translate(100,100); //Faites pivoter l'aiguille context.rotate(1) //Dessinez le contexte de l'aiguille des minutes. moveTo(0, 0); context.lineTo(0,-85); //Dessine l'aiguille des heures context.moveTo(0,0); //Chemin du trait context.Stroke(); context.StrokeStyle = '#f00';8. Dessinez une image, drawImage()
var img = document.getElementByTagNames('image')[0]; contexte.drawImage(img,0,10,50,50,0,100,40,60);9 paramètres : l'image à dessiner, l'image originale |x|y|w|h|, l'image cible |x|y|w|h|
9. Ombres et dégradés
Shadow a principalement les valeurs d'attribut suivantes :
var context = draw.getContext('2d'); //Définir l'ombre context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; Gradient crée une nouvelle méthode createLinearGradient() de dégradé linéaire, là sont quatre paramètres |x1|y1|x2|y2| qui sont les coordonnées du point de départ et les coordonnées du point final var gradient = context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,'#fff'); //0 signifie démarrer gradient.addColorStop(1,'#000'); L'attribut de dégradé défini context.fillStyle = gradient; //Mettez le dégradé lors du remplissage context.fillRect(30,30,50,50);Créez un dégradé radial createRadialGradient(), les six paramètres |x1|y2|radius1|x2|y2|radius2| sont respectivement le centre et le rayon du premier cercle et le centre et le rayon du deuxième cercle.
10. En utilisant les données d'image, vous pouvez obtenir les données d'image originales via getImageData(). Quatre paramètres |x|y|w|h|. Chaque objet ImageData a trois attributs, largeur/hauteur/données. Data est un tableau qui stocke les données de chaque pixel en interne. La valeur de chaque élément est comprise entre 0 et 255.
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, rouge = data[0], vert = data[1], bleu = data[2], alpha = data[3] ; Un filtre gris var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; //Dessine l'image originale context.drawImage(img,0,0,100,100); Obtenir les données d'image imageData = context.getImageData(0,0,img.width,img.height data = imageData.data); for(i=0,len=data.length;i<len;i+=4){ rouge = données[i]; vert = données[i+1]; bleu = données[i+2]; i+3]; //Calculer la moyenne de RVB = Math.floor((red+green+blue)/3); //Définir la valeur de couleur data[i] = data[i+1] = moyenne; ; data[i+2] = moyenne; } imageData.data = data; //Dessiner des données sur le canevas context.putImageData(imageData,0,0)}Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.