Canvas 开始前的准备 · Canvas动画教程

Canvas 开始前的准备 · Canvas动画教程

Cp 开始前的准备

添加一个Canvas

在HTML中添加Canvas非常简单，只需要在HTML的部分，添加上标签就可以了！可以参考下面的代码。

 



    
    你的浏览器居然不支持Canvas？！赶快换一个吧！！
    
 

演示 2-1

由于结果页面是一个完完全全的空白页面，所以这里我就不贴图了。大家可能会很好奇，为什么会是一个空白呢？（废话，我还没来得及画画呢！）Canvas的本意是画布，也就是画布的意思（废话...），画布在HTML5中是透明的，是不可见的。

那标签中的那段文本是什么意思呢？那是一旦浏览器执行HTML页面时不支持Canvas，就会显示这段文字，换言之，只要你的浏览器支持Canvas，页面上就不会显示这个文本。

那中的id是什么意思？id是标签的属性之一，在Javascript代码中用来指定特定的的名字，就像一个人的身份z号码一样，是唯一的。

为了更清楚的展示Canvas，以及方便之后的演示，我稍微修改了一下代码，之后的绘图都会在这个Canvas上绘制。

    
    你的浏览器居然不支持Canvas？！赶快换一个吧！！
    

 

演示 2-2

运行结果：

对以上代码有几点说明：

添加了标签，将包裹其中，个人习惯，暂时并没有什么卵用。

给标签指定了width和height属性，规定了它的宽和高。

给标签添加了一个内联样式，使其变为块级元素并居中显示。

关于CSS的内容这里不做说明，毕竟这不是本课程的主角，若做扩展会花费大量篇幅。考虑到HTML、CSS是基础，建议大家花点时间自己学，推荐慕课网的HTML+CSS课程）

引用Canvas元素

文档对象模型(DOM)

文档对象模型（document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在Javascript与Jscript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBscript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

文档对象模型代表了在 HTML 页面上的所有对象。它是语言中立且平台中立的。它允许页面的内容和样式被 Web 浏览器渲染之后再次更新。用户可以通过 Javascript 访问 DOM。

在开始使用前,首先需要了解两个特定的 DOM 对象：window 和 document。

window 对象是 DOM 的最高一级，需要对这个对象进行检测来确保开始使用 Canvas 应用程序之前，已经加载了所有的资源和代码。

document 对象包含所有在 HTML 页面上的 HTML 标签。需要对这个对象进行检索来找 出用 Javascript  *** 纵的实例。

Javascript放置位置

使用 Javascript 为 Canvas 编程会产生一个问题：在创建的页面中，从哪里启动 Javascript程序?

把 Javascript 放进 HTML 页面的标签中是个不错的主意，这样做的好处是很容易找到它，也是上一章我们介绍中所提到的。但是，把 Javascript 程序放在这里就意味着整个 HTML 页面要加载完 JavaScrpit 才能配合 HTML 运行，这段 Javascript 代码也会在整个页面加载前就开始执行了。结果就是，运行 Javascript 程序之前必须检查 HTML 页面是否已经加载完毕。

最近有一个趋势是将 Javascript 放在 HTML 文档结尾处的标签之前，这样就可以确保在 Javascript 运行时整个页面已经加载完毕。然而，由于在运行程序前需要使用 Javascript 测试页面是否加载，因此最好还是将 Javascript 放在中。

不过本人不走寻常路(笑)，所以之后的案例，还是按照自己的编码风格将Javascript代码放在了的尾部。当然，如果Javascript代码有些多，就推荐使用加载外部 .js 文件的方式。代码大致如下：

在实际项目开发中，都是将HTML、CSS、JS三者完全分离的。不过用于案例演示代码略少，所以大多没有使用加载外部 .js 文件的方式。

获取canvas对象

获取canvas对象其实就是一句话的事情。

var canvas = document.getElementById("canvas");

var用于变量定义，由于JS是弱类型语言，所以定义啥变量都用var。跟在var之后的canvas是变量。使用document对象的getElementById()的方法，通过id获取对象。之前我们为标签赋予了一个id，名叫canvas，所以该句话最后一个canvas是指的id——canvas。（是不是有点绕，需要自己多读几遍捋清楚。）

获得画笔(2D环境)

画画首先需要啥？画笔啊。获取canvas画笔也是一句话的事情，就是直接使用刚才获得的canvas对象，调用它的getContext("2d")方法，即可。

var context = canvas.getContext("2d");

这里的context便是画笔了。

在其他教程中都是使用2D环境这个专有术语，我觉得画笔更加形象。灵感引自Java中Graphics类的g画笔，原理与之相同。

总结

准备工作只有三步：

布置画布：通过添加标签，添加canvas元素

获取画布：通过标签的id，获得canvas对象

获得画笔：通过canvas对象的getContext("2d")方法，获得2D环境

对应的代码也就是三句话：

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

完整代码如下。

    
    




    
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/zaji/3013116.html