Zoeken…
Hoe het HTML5 Canvas-element aan een webpagina toe te voegen
Html5-Canvas ...
- Is een Html5-element.
- Wordt ondersteund in de meeste moderne browsers (Internet Explorer 9+).
- Is een zichtbaar element dat standaard transparant is
- Heeft een standaardbreedte van 300 px en een standaardhoogte van 150 px.
- Vereist JavaScript omdat alle inhoud programmatisch aan het Canvas moet worden toegevoegd.
Voorbeeld: maak een Html5-Canvas-element met zowel Html5-markeringen als 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>
Canvasgrootte en resolutie
De grootte van een canvas is het gebied dat het op de pagina beslaat en wordt gedefinieerd door de CSS-eigenschappen voor breedte en hoogte.
canvas {
width : 1000px;
height : 1000px;
}
De canvasresolutie definieert het aantal pixels dat het bevat. De resolutie wordt ingesteld door de breedte- en hoogte-eigenschappen van het canvaselement in te stellen. Indien niet opgegeven, wordt het canvas standaard ingesteld op 300 bij 150 pixels.
Het volgende canvas gebruikt de bovenstaande CSS-grootte, maar omdat de width en height niet zijn opgegeven, is de resolutie 300 bij 150.
<canvas id="my-canvas"></canvas>
Hierdoor wordt elke pixel ongelijkmatig uitgerekt. Het pixelaspect is 1: 2. Wanneer het canvas wordt uitgerekt, gebruikt de browser bilineaire filtering. Dit heeft een effect van het vervagen van pixels die zijn uitgerekt.
Voor de beste resultaten bij het gebruik van het canvas moet u ervoor zorgen dat de canvasresolutie overeenkomt met de weergavegrootte.
In navolging van de CSS-stijl hierboven om de weergavegrootte te matchen, voegt u het canvas toe met de width en height ingesteld op hetzelfde aantal pixels als de stijl definieert.
<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>
Off screen canvas
Vaak moet u bij het werken met het canvas een canvas hebben om enkele intrum-pixelgegevens te bevatten. Het is gemakkelijk om een offscreen canvas te maken, een 2D-context te verkrijgen. Een offscreen canvas zal ook de beschikbare grafische hardware gebruiken om te renderen.
De volgende code maakt eenvoudig een canvas en vult dit met blauwe pixels.
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);
Vaak wordt het offscreen-canvas voor veel taken gebruikt en hebt u mogelijk veel canvas. Om het gebruik van het canvas te vereenvoudigen, kunt u de canvascontext aan het canvas koppelen.
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);
Muispositie op het canvas detecteren
In dit voorbeeld wordt getoond hoe u de muispositie ten opzichte van het canvas kunt bepalen, zodat (0,0) de linkerbovenhoek van het HTML5 Canvas is. De e.clientX en e.clientY krijgen de e.clientY ten opzichte van de bovenkant van het document, om dit te wijzigen op basis van de bovenkant van het canvas trekken we de left en right van het canvas af van de client X en Y.
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);
});
Het gebruik van Math.round moet ervoor zorgen dat de x,y posities gehele getallen zijn, omdat de omringende rechthoek van het canvas mogelijk geen integerposities heeft.
Hallo Wereld
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);
Resultaat
Een index voor HTML5 Canvas mogelijkheden en toepassingen
Mogelijkheden van het canvas
Met Canvas kunt u programmatisch tekenen op uw webpagina:
Canvastekeningen kunnen uitgebreid worden gestileerd:
- slagbreedte ,
- slagkleur ,
- vorm vul kleur ,
- opaciteit ,
- schaduwen
- lineaire verlopen en radiale verlopen ,
- doopvont gezicht ,
- lettergrootte ,
- tekstuitlijning ,
- tekst kan worden gestreken, gevuld of zowel gestreken & gevuld ,
- afbeelding resizing ,
- afbeelding bijsnijden ,
- compositing
Gebruik van het canvas
Tekeningen kunnen worden gecombineerd en overal op het canvas worden geplaatst, zodat het kan worden gebruikt om:
- Paint / Sketch-toepassingen,
- Snelle interactieve games,
- Gegevensanalyses zoals grafieken, grafieken,
- Photoshop-achtige beeldbewerking,
- Flashachtige advertenties en flitsende webinhoud.
Met Canvas kunt u de rode, groene, blauwe en alfakleuren van afbeeldingen manipuleren. Hierdoor kan canvas afbeeldingen manipuleren met resultaten die vergelijkbaar zijn met Photoshop.
- Kleur elk deel van een afbeelding opnieuw op pixelniveau (als u HSL gebruikt, kunt u een afbeelding zelfs opnieuw kleuren met behoud van de belangrijke verlichting en verzadiging, zodat het resultaat er niet uitziet als iemand die verf op de afbeelding heeft geslagen),
- "Knockout" de achtergrond rond een persoon / item in een afbeelding,
- Detecteer en vul een deel van een afbeelding (verander bijvoorbeeld de kleur van een door de gebruiker aangeklikt bloemblad van groen naar geel - alleen dat aangeklikte bloemblad!),
- Doe Perspectief kromtrekken (wikkel bijvoorbeeld een afbeelding rond de curve van een kopje),
- Bekijk een afbeelding op inhoud (bijv. Gezichtsherkenning),
- Beantwoord vragen over een afbeelding: staat er een auto geparkeerd in deze afbeelding van mijn parkeerplaats ?,
- Pas standaard afbeeldingsfilters toe (grijswaarden, sepia, enz.)
- Pas elk exotisch beeldfilter toe dat je maar kunt bedenken (Sobel Edge Detection),
- Combineer afbeeldingen. Als lieve oma Sue de familiereünie niet kon halen, "photoshop" haar dan gewoon naar het reüniebeeld. Houd niet van Neef Phil - gewoon "photoshop hem uit,
- Een video afspelen / een frame uit een video pakken,
- Exporteer de canvas-inhoud als een .jpg | .png-afbeelding (u kunt zelfs de afbeelding eventueel bijsnijden of annoteren en het resultaat als een nieuwe afbeelding exporteren),
Over het verplaatsen en bewerken van canvastekeningen (bijvoorbeeld om een actiespel te maken):
- Nadat er iets op het canvas is getekend, kan die bestaande tekening niet worden verplaatst of bewerkt. Deze veel voorkomende misvatting dat canvastekeningen verplaatsbaar zijn, is het verduidelijken waard: bestaande canvastekeningen kunnen niet worden bewerkt of verplaatst!
- Canvas tekent heel, heel snel. Canvas kan in een fractie van een seconde honderden afbeeldingen, teksten, lijnen en curven tekenen. Het gebruikt de GPU indien beschikbaar om het tekenen te versnellen.
- Canvas creëert de illusie van beweging door snel en herhaaldelijk iets te tekenen en het vervolgens in een nieuwe positie opnieuw te tekenen. Net als televisie geeft deze constante hertekening het oog de illusie van beweging.
Draaien
De methode rotate(r) van de 2D-context roteert het canvas met het opgegeven aantal r radialen rond de oorsprong.
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);
};
Canvas opslaan in afbeeldingsbestand
U kunt een canvas opslaan in een afbeeldingsbestand met de methode canvas.toDataURL() , die de gegevens-URI voor de afbeeldingsgegevens van het canvas retourneert.
De methode kan twee optionele parameters canvas.toDataURL(type, encoderOptions) : type is het afbeeldingsformaat (indien weggelaten is de standaardafbeelding image/png ); encoderOptions is een getal tussen 0 en 1 dat de beeldkwaliteit aangeeft (standaardwaarde is 0,92).
Hier tekenen we een canvas en koppelen de gegevens-URI van het canvas aan de link "Downloaden naar myImage.jpg".
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 op JSfiddle.