vlambda博客
学习文章列表

定义与用法

• <canvas> 的英文含义是“画布”，该标签定义图形，比如图表和其他图像。

• <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

• <canvas> 标签是 HTML 5 中的新标签；IE 8 或更早版本的 IE 浏览器不支持 <canvas> 标签。

语法格式

<canvas id=”” width =”” height =”” style = “”>……</canvas>

示例代码

<script>
 var c=document.getElementById('myCanvas');
 var ctx=c.getContext('2d');
 ctx.fillStyle='#FF0000';
 ctx.fillRect(0,0,80,100);
</script>

效果展示：

点击下方“阅读原文”可亲试效果

浏览器支持

IE	Firefox	Chrome	Safari	Opera

主流浏览器都支持<canvas> 标签，Internet Explorer 8 以及更早的版本不支持 <canvas> 标签。

标签属性

属性	值	描述
height	pixels	规定画布的高度。
width	pixels	规定画布的宽度。

全局属性

<canvas> 标签支持 HTML 的全局属性。

事件属性

<canvas> 标签支持 HTML 的事件属性。

更多示例

canvas元素可以完成非常复杂的绘图，我们在canvas元素的教程中会详细介绍canvas中诸多元素的功能。

让我们一起体验另外一个示例，在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

<canvas id="myCanvas" width="270" height="160" style="border:1px solid #c3c3c3;">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var c = document.getElementById("myCanvas");
    var canvOK = 1;
    try {
        c.getContext("2d");
    } catch(er) {
        canvOK = 0;
    }
    if (canvOK == 1) {
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(20, 20, 100, 50);

        var grd = ctx.createLinearGradient(140, 20, 240, 70);
        grd.addColorStop(0, "black");
        grd.addColorStop(1, "white");
        ctx.fillStyle = grd;
        ctx.fillRect(140, 20, 100, 50);

        var grd2 = ctx.createLinearGradient(20, 90, 120, 90);
        grd2.addColorStop(0, "black");
        grd2.addColorStop("0.3", "magenta");
        grd2.addColorStop("0.5", "blue");
        grd2.addColorStop("0.6", "green");
        grd2.addColorStop("0.8", "yellow");
        grd2.addColorStop(1, "red");
        ctx.fillStyle = grd2;
        ctx.fillRect(20, 90, 100, 50);

        ctx.font = "30px Verdana";
        var grd3 = ctx.createLinearGradient(140, 20, 240, 90);
        grd3.addColorStop(0, "black");
        grd3.addColorStop("0.3", "magenta");
        grd3.addColorStop("0.6", "blue");
        grd3.addColorStop("0.8", "green");
        grd3.addColorStop(1, "red");
        ctx.strokeStyle = grd3;
        ctx.strokeText("Smile!", 140, 120);
    }
</script>

效果展示：

点击下方“阅读原文”可亲试效果