mozilla
您的搜索结果

    Canvas

    <canvas>HTML5 新增的元素,可使用JavaScript脚本来绘制图形。例如:画图,合成照片,创建动画甚至实时视频处理与渲染。

    Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>。它首先是由 Apple 引入的,用于 OS X Dashboard 和 Safari。Internet Explorer 从IE9开始<canvas> ,更旧版本的IE可以引入 Google 的 Explorer Canvas 项目中的脚本来获得<canvas>支持。Chrome和Opera 9+ 也支持 <canvas>

    <canvas>元素也可被WebGL用作网页上3D图形硬件加速

    示例

    这是一个使用 CanvasRenderingContext2D.fillRect() 方法的简单例子.

    HTML

    <canvas id="canvas"></canvas>
    

    JavaScript

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.fillStyle = "green";
    ctx.fillRect(10, 10, 100, 100);
    

    编辑下面的代码,查看画布的变化:

    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
    <div class="playable-buttons">
      <input id="edit" type="button" value="Edit" />
      <input id="reset" type="button" value="Reset" />
    </div>
    <textarea id="code" class="playable-code">
    ctx.fillStyle = "green";
    ctx.fillRect(10, 10, 100, 100);</textarea>
    
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var textarea = document.getElementById("code");
    var reset = document.getElementById("reset");
    var edit = document.getElementById("edit");
    var code = textarea.value;
    
    function drawCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      eval(textarea.value);
    }
    
    reset.addEventListener("click", function() {
      textarea.value = code;
      drawCanvas();
    });
    
    edit.addEventListener("click", function() {
      textarea.focus();
    })
    
    textarea.addEventListener("input", drawCanvas);
    window.addEventListener("load", drawCanvas);
    

    参考

    WebGLRenderingContext 有关的接口请参考 WebGL.

    教程与指导

    Canvas 教程
    包括了<canvas>的基本用法与高级功能的综合性教程。
    代码片段: Canvas
    一些面向开发者的 <canvas> 代码片段。
    光线追踪Demo
    运用canvas制作的光线追踪动画示例。
    在canvas上绘制DOM对象
    如何在canvas上绘制DOM内容,如HTML元素。
    使用canvas绘制图形 (将合并到主教程中)
    一篇canvas的介绍,大部分内容被 Canvas教程 所替代。

    资源

    通用

    标准

    标准 状态 备注
    WHATWG HTML Living Standard
    Canvas
    Living Standard  
    HTML5
    Canvas
    Recommendation  

    其它相关

    文档标签和贡献者

    Contributors to this page: ziyunfei, ethertank, leegorous, LinusYu, cuixiping, bqdove
    最后编辑者: cuixiping,