Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

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
    Proposed Recommendation  

    其它相关

    文档标签和贡献者

    此页面的贡献者有: LinusYu, ziyunfei, leegorous, ethertank, bqdove, cuixiping
    最后编辑者: cuixiping,