mozilla
Your Search Results

    Canvas

    This translation is incomplete. Please help translate this article from English.

    Mit der Einführung von HTML5 wurde ein neues Element zur Zeichnung von Grafiken mittels JavaScript-API vorgestellt: <canvas>. Die Anwendungsgebiete sind äußerst flexibel, so ist es möglich, mit Canvas Diagramme zu zeichnen, Bilder zu bearbeiten, Animationen zu erstellen oder sogar Videos zu bearbeiten und zu rendern.

    Der Support für <canvas> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab Firefox 1.5) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X Dashboard und Safari entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's Explorer Canvas Projekt auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <canvas> ebenfalls problemlos.

    Das <canvas> Element wird zudem von WebGL für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.

    Ein Beispiel von Canvas:

    HTML

    <canvas id="canvas" width="200" height="100"></canvas>
    

    CSS

    #canvas {
      border: 1px solid #ddd;
    }

    JavaScript

    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d");
    
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    

    Reference

    The interfaces related to the WebGLRenderingContext are referenced under WebGL.

    [1] CanvasPathMethods abstracts the path-related methods and properties used by both CanvasRenderingContext2D and Path. For the moment, no browser implements Path (see Bug 830734) and the spec is still in flux.

    [2] CanvasDrawingStyles abstracts the style-related methods and properties used by both CanvasRenderingContext2D and DrawingStyles.

    Anleitungen und Tutorials

    Canvas Tutorial
    Ein umfangreiches Tutorial, welches neben grundlegenden Funktionen auch fortgeschrittene Themen zu <canvas> behandelt.
    Code-Ausschnitte zu Canvas
    Eine Sammlung von Beispielen für Entwickler über <canvas>.
    Beispiele zu Canvas
    Ein paar Codebeispiele zu <canvas>.
    Drawing DOM objects into a canvas
    How to draw DOM content, such as HTML elements, into a canvas.
    A basic raycaster
    A demo of ray-tracing animation using canvas.
    Drawing graphics with canvas
    An older introductory page to the canvas, mostly superceded by the Canvas tutorial.

    Resources

    Generic

    Libraries

    • Fabric.js is an open-source canvas library with SVG parsing capabilities 
    • Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications
    • Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas
    • libCanvas is powerful and lightweight canvas framework
    • Processing.js is a port of the Processing visualization language
    • EaselJS is a library with a Flash-like API
    • PlotKit is a charting and graphing library
    • Rekapi is an animation keyframing API for Canvas
    • PhiloGL is a WebGL framework for data visualization, creative coding and game development.
    • JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.
    • Frame-Engine is a framework for developping applications and games

    Specifications

    Specification Status Comment
    WHATWG HTML Living Standard
    Die Definition von 'Canvas' in dieser Spezifikation.
    Lebender Standard  
    HTML5
    Die Definition von 'Canvas' in dieser Spezifikation.
    Empfehlung  

     

    Document Tags and Contributors

    Contributors to this page: barning, andreas.remdt
    Last updated by: barning,