HTML5边玩边学（一）-画布详解-H5教程-PHP中文网

HTML5边玩边学（一）-画布详解

黄舟

发布： 2017-03-29 14:36:36

原创

1896人浏览过

width="750">

一、canvas>标签

Html5 引入了一个新的

新闻链接：Google声称Chrome7浏览器将提速60倍

@@######@@

标签中间的内容是替换内容，如果用户的浏览器不支持

上面的

如果你用的是IE浏览器，可能只能看到一个提示；如果你用的是谷歌浏览器或者火狐浏览器，你就可以看到一个红色的方块区域。

VALL-E

VALL-E是一种用于文本到语音生成 (TTS) 的语言建模方法

142

二、渲染上下文 Rendering Context

其实光有

题外话：为什么要整出一个“上下文”这么复杂的概念呢？因为有了上下文对象，我们就可以让各种不同的图形设备在我们眼里面看起都是一个样，我们只需要专注于绘图，其他的工作就让操作系统和浏览器去操心吧，说白了就是把各式各样的具体变成统一的抽象，从而减轻我们的负担。

获取上下文非常简单，只需要如下两行代码：

<canvas>标签的用法非常简单，如下：
<canvas id="tutorial" width="150" height="150" style="background-color:red;">
            你的浏览器不支持 Canvas 标签</canvas>

登录后复制

首先获取 canvas 对象，然后调用 canvas 对象的 getContext 方法，这个方法目前只能传入参数 "2d"，不久的将来他可能会支持参数 "3d"，你一定明白那意味着什么，让我们期待吧。

getContext 方法返回一个 CanvasRenderingContext2D 对象，即渲染上下文对象，你可以在这里找到关于它的更多内容，都是一些绘图方法。

三、浏览器支持

除了在那些不支持的浏览器上显示替用内容之外，我们还可以通过脚本的方式来检查浏览器是否支持 canvas ，方法很简单，判断 getContext 函数是否存在即可，代码如下：

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

登录后复制

var canvas = document.getElementById('tutorial'); 
if (canvas.getContext){ 
    alert("支持 <canvas> 标签"); 
} else { 
    alert("不支持 <canvas> 标签");

登录后复制

以上就是HTML5边玩边学（一）-画布详解的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

H5页面制作适合哪些应用场景 H5页面制作如何进行测试 H5页面制作的流程是怎样的 H5页面制作能做什么 H5页面制作是开发网页吗