HTML => Duk

parametrar

Attribut	Beskrivning
höjd	Anger dukhöjden
bredd	Anger dukbredden

Anmärkningar

Den här taggen är inte kompatibel med versioner av Internet Explorer mindre än 9. Kontrollera caniuse.com för webbläsarkompatibilitet.
canvas är bara en behållare för grafik, och den faktiska ritningen av grafik görs av JavaScript.

Grundläggande exempel

canvas introducerades i HTML5 för ritning av grafik.

<canvas id="myCanvas">
   Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>

Ovanstående skapar ett transparent HTML <canvas> -element med en storlek på 300 × 150 px.

Du kan använda dukelementet för att rita fantastiska saker som former, grafer, manipulera bilder, skapa engagerande spel etc. med JavaScript .
Den canvas s 2D tänjbara skiktet ytan Object benämnes CanvasRenderingContext2D ; eller från en HTMLCanvasElement med .getContext("2d") :

var ctx = document.getElementById("myCanvas").getContext("2d");
// now we can refer to the canvas's 2D layer context using `ctx`

ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, width, height

ctx.fillStyle = "#000";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y

jsFiddle-exempel

Rita två rektanglar på a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Draw two rectangles on the canvas</title>
    <style>
      canvas{
          border:1px solid gray;
      }
    </style>
    <script async>
      window.onload = init; // call init() once the window is completely loaded
      function init(){
        // #1 - get reference to <canvas> element
        var canvas = document.querySelector('canvas');
        
        // #2 - get reference to the drawing context and drawing API
        var ctx = canvas.getContext('2d');

        // #3 - all fill operations are now in red
        ctx.fillStyle = 'red'; 

        // #4 - fill a 100x100 rectangle at x=0,y=0
        ctx.fillRect(0,0,100,100);
        
        // #5 - all fill operations are now in green
        ctx.fillStyle = 'green'; 
        
        // #6 - fill a 50x50 rectangle at x=25,y=25
        ctx.fillRect(25,25,50,50);
        
      }
      </script>
</head>
<body>
  <canvas width=300 height=200>Your browser does not support canvas.</canvas>
</body>
</html>

Detta exempel ser ut så här:

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

HTML
Duk

Sök…

parametrar

Anmärkningar

Grundläggande exempel

Rita två rektanglar på a