html5-canvas Handledning
Komma igång med html5-duk

Android AngularJS Cordova CSS HTML JavaScript jQuery Node.js PHP SVG

Så här lägger du till Html5 Canvas Element på en webbsida

Html5-Canvas ...

Är ett Html5-element.
Stöds i de flesta moderna webbläsare (Internet Explorer 9+).
Är ett synligt element som är transparent som standard
Har en standardbredd på 300 px och en standardhöjd på 150 px.
Kräver JavaScript eftersom allt innehåll måste programmeras till Canvas.

Exempel: Skapa ett Html5-Canvas-element med både Html5-markering och 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>

Kanvasstorlek och upplösning

Storleken på en duk är det område som den upptar på sidan och definieras av CSS-bredd- och höjdegenskaperna.

canvas {
   width : 1000px;
   height : 1000px;
}

Kanvasupplösningen definierar antalet pixlar som den innehåller. Upplösningen ställs in genom att ställa in canvaselementets bredd och höjdegenskaper. Om det inte anges är standardytan 300 till 150 pixlar.

Följande duk kommer att använda ovanstående CSS-storlek men eftersom width och height inte anges kommer upplösningen att vara 300 vid 150.

<canvas id="my-canvas"></canvas>

Detta kommer att resultera i att varje pixel sträcks ojämnt. Pixel-aspekten är 1: 2. När duken är utsträckt kommer webbläsaren att använda bilinjär filtrering. Detta har en effekt av att suddiga pixlar som är utsträckta.

För bästa resultat när du använder duken, se till att dukupplösningen matchar visningsstorleken.

Följande från CSS-stilen ovan för att matcha visningsstorleken lägg till duken med width och height inställd på samma pixelräkning som stilen definierar.

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>

Kanvas utanför skärmen

Många gånger när du arbetar med duken måste du ha en duk för att hålla lite intrum-pixeldata. Det är enkelt att skapa en skärmduk utan att få en 2D-kontext. En kanvas utanför skärmen använder också den tillgängliga grafikhårdvaran för att rendera.

Följande kod skapar helt enkelt en duk och fyller den med blå pixlar.

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

Många gånger kommer skärmduken att användas för många uppgifter, och du kan ha många dukar. För att förenkla användningen av duken kan du fästa canvas-sammanhanget på duken.

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

Upptäcker musposition på duken

Detta exempel visar hur man får muspositionen i förhållande till duken, så att (0,0) är det övre vänstra hörnet av HTML5 Canvas. e.clientX och e.clientY kommer att få e.clientY i förhållande till dokumentets övre del, för att ändra detta till att baseras på toppen av duken, vi drar bort left och right position på duken från klienten X och 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);
});

Körbart exempel

Användningen av Math.round beror på att säkerställa att x,y positionerna är heltal, eftersom dukens begränsande rektangel kanske inte har heltalspositioner.

Hej världen

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

Resultat

Ett index för Html5 Canvas Capabilities & Uses

Canvas kapacitet

Canvas låter dig programmera att rita på din webbsida:

Kanfasritningar kan utformas i stor omfattning:

slagbredd ,
slagfärg ,
form fylla färg ,
opacitet ,
skugga ,
linjära lutningar och radiella lutningar ,
teckensnitt ansikte ,
teckenstorlek ,
textjustering ,
text kan sträckas, fyllas eller båda strök och fylls ,
storleksändring ,
beskärning av bilder ,
compositing

Användning av duken

Ritningar kan kombineras och placeras var som helst på duken så att de kan användas för att skapa:

Måla / skissa applikationer,
Snabba interaktiva spel,
Dataanalyser som diagram, grafer,
Photoshop-liknande avbildning,
Flash-liknande reklam och Flashy webbinnehåll.

Canvas låter dig manipulera de röda, gröna, blå och alfakomponentfärgerna i bilder. Detta gör att duk kan manipulera bilder med resultat som liknar Photoshop.

Omfärga någon del av en bild på pixelnivån (om du använder HSL kan du till och med färga en bild samtidigt som du behåller den viktiga belysning och mättnad så att resultatet inte ser ut som att någon tappade färg på bilden),
"Knockout" bakgrunden runt en person / objekt i en bild,
Upptäck och fyll i en del av en bild (t.ex. ändra färgen på ett användarklickat blommekronblad från grönt till gult - precis det klickade kronbladet!),
Gör perspektivvridning (t.ex. linda in en bild runt en koppes kurva),
Undersök en bild för innehåll (t.ex. ansiktsigenkänning),
Svara på frågor om en bild: Finns det en bil parkerad i den här bilden av min parkeringsplats?
Använd standardbildfilter (gråskala, sepia, etc)
Använd alla exotiska bildfilter du kan drömma om (Sobel Edge Detection),
Kombinera bilder. Om kära mormor Sue inte kunde ta sig till familjeåterföreningen, bara "photoshop" henne till återföreningsbilden. Gillar inte Cousin Phil - bara "photoshop honom ut,
Spela en video / Ta en ram från en video,
Exportera dukinnehållet som .jpg | .png-bild (du kan till och med valfritt beskära eller kommentera bilden och exportera resultatet som en ny bild),

Om att flytta och redigera kanvasritningar (till exempel för att skapa ett actionspel):

Efter att något har ritats på duken kan den befintliga ritningen inte flyttas eller redigeras. Denna vanliga missuppfattning att kanfasritningar är rörliga är värda att klargöra: Befintliga kanvasritningar kan inte redigeras eller flyttas!
Canvas ritar mycket, mycket snabbt. Canvas kan rita hundratals bilder, texter, linjer och kurvor på en bråkdel av en sekund. Den använder GPU när den är tillgänglig för att påskynda ritningen.
Canvas skapar en illusion av rörelse genom att snabbt och upprepade gånger rita något och sedan rita om det i en ny position. Liksom tv ger denna ständiga ritning ögat illusionen av rörelse.

Rotera

Metoden rotate(r) i 2D-sammanhanget roterar duken med den angivna mängden r radianer runt ursprunget.

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

Live-demo på JSfiddle

Spara duk i bildfil

Du kan spara en duk i en bildfil med metoden canvas.toDataURL() , som returnerar data URI för dukens bilddata.

Metoden kan ta två valfria parametrar canvas.toDataURL(type, encoderOptions) : type är bildformatet (om utelämnad är standardbilden image/png ); encoderOptions är ett tal mellan 0 och 1 som indikerar bildkvalitet (standard är 0,92).

Här ritar vi en duk och fäster kanvasens data URI till länken "Ladda ner till 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 på JSfiddle.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow