《HTML5 Canvas开发详解》——1.4 JavaScript和Canvas

1.4 JavaScript和Canvas

JavaScript是用来创建Canvas应用程序的一种程序设计语言,能在现有的任何Web浏览器中运行。如果需要重温JavaScript,请关注Douglas Crockford的书《JavaScript: The Good Parts》(O’Reilly),这本书很流行并且有很强的参考价值。

1.4.1 JavaScript框架和库
目前有很多流行的JavaScript框架,例如jQuery、Processing.js等,可以帮助开发者提高JavaScript的开发效率。这些框架有望于在6~12个月内就为Canvas提供更好的支持。在此期间,这里将重点放在直接用JavaScript来控制画布。然而,在适当的地方也会介绍这些框架和JavaScript库,例如Modernizr、JSColor以及WebGL,以帮助读者更高效地开发。

1.4.2 JavaScript放置的位置及其理由
既然使用JavaScript为Canvas编程,这就产生了一个问题:在创建的页面中,从哪里启动JavaScript程序呢?

把JavaScript放进HTML页面的 < head > 标签中是个不错的主意,好处是很容易找到它。但是,把JavaScript程序放在这里就意味着整个HTML页面加载完毕JavaScrpit才能配合HTML运行,这段JavaScript代码也会在整个页面加载前就开始执行了。结果就是,运行JavaScript程序之前必须检查HTML页面是否已经加载完毕。

最近有一个趋势是将JavaScript放在HTML文档结尾处的< /body >标签里,这样就可以确保在JavaScript运行时整个页面已经加载完毕。然而,由于在运行< canvas >程序前需要使用JavaScript测试页面是否加载,最好还是将JavaScript放在< head >中。如果读者不喜欢这样,也可以采用适合自己的代码习惯。

代码放在哪儿都行,可以放在HTML页面代码行内,或者加载一个外部 .js文件。加载外部JavaScript文件的代码大致如下。

<script type="text/javascript" src="canvasapp.js"></script>

简单起见,这里将把代码写在HTML页面行内。不过,如果读者已掌握,把它放在一个外部文件再加载运行也未尝不可。

提示:
HTML5不需要再指定脚本类型。

时间: 2024-09-14 05:52:39

《HTML5 Canvas开发详解》——1.4 JavaScript和Canvas的相关文章

《HTML5 Canvas开发详解》——2.3 Canvas状态

2.3 Canvas状态 在Canvas上下文中绘图时可以利用所谓的绘图堆栈状态.每个状态随时存储Canvas上下文数据.下面是存储在状态堆栈的数据列表. 变换矩阵信息,例如旋转或平移时使用context.rotate()方法和context.setTransform()方法. 当前剪贴区域. 画布属性的当前值,如下所示(但不限于). -globalAlpha -globalCompositeOperation -strokeStyle -textAlign, textBaseline -lin

《HTML5 canvas开发详解(第2版)》——1.5 JavaScript和Canvas

1.5 JavaScript和Canvas JavaScript是用来创建Canvas应用程序的一种程序设计语言,能在现有的任何Web浏览器中运行.如果需要重温JavaScript的相关内容,请关注Douglas Crockford的书<JavaScript: The Good Parts>(O'Reilly).这本书很流行,并且有很强的参考价值. JavaScript放置的位置及其理由使用JavaScript为Canvas编程会产生一个问题:在创建的页面中,从哪里启动JavaScript程序

《HTML5 canvas开发详解(第2版)》——第1章 HTML5 Canvas简介1.1 什么是HTML5

第1章 HTML5 Canvas简介 HTML5是新一代的HTML,即超文本标记语言.HTML从1993年第一次标准化后,便奠定了万维网的基础.HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容. HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧中完全重绘屏幕上的位图.作为一名程序员,所要做的就是在每一帧渲染之前设置屏幕的显

《HTML5 canvas开发详解(第2版)》——导读

前言第2版介绍自从本书第1版发行之后,在过去的两年里,HTML5 Canvas的使用有了突飞猛进的增长.本书的第1版可以称得上是第一批介绍Canvas的专著之一.在我们为自己的快速而感到自豪同时也意味着我们曾经独自进行了大量的研究和探索.早在2011年,只有极少数HTML5 Canvas应用的例子和教程.但在2013年情形发生了改变.现在有许多关于HTML5 Canvas的资源可供选择,从框架到API,有许多网站和书籍进行专门的阐述.为了编写第2版,我们进行了大量艰辛的工作来检查在第1版中哪些部

《HTML5 Canvas开发详解》——1.3 文档对象模型(DOM)和Canvas

1.3 文档对象模型(DOM)和Canvas 文档对象模型代表了在HTML页面上的所有对象.它是语言中立且平台中立的.它允许页面的内容和样式被Web浏览器渲染之后再次更新.可以通过JavaScript访问DOM,从20世纪90年代末以来它已经成为JavaScript.DHTML和CSS开发最重要的一部分. 画布元素本身可以通过DOM,在Web浏览器中经由Canvas 2D上下文访问,但是在Canvas中创建的单个图形元素是不能通过DOM访问的.正如本章前面讲到的,这是因为画布工作在即时模式,它并

《HTML5 Canvas开发详解》——第1章 HTML5 Canvas简介1.1 基础的HTML页面

第1章 HTML5 Canvas简介 HTML5是新一代的HTML,即超文本标记语言.HTML从1993年第一次标准化后,便奠定了万维网的基础.HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容. HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧完全重绘屏幕上的位图.作为一个程序员,所要做的就是在每一帧渲染之前设置屏幕显示,

《HTML5 Canvas开发详解》——导读

https://yqfile.alicdn.com/bc81e95aba389209ecb7176965c56b0ba2d9c780.png" > 前言HTML5 Canvas为开发者提供了一个新的机会,利用它仅使用普通的HTML和JavaScript语言就可以在常见的浏览器中创建动画图形.Canvas是HTML5中使用率最高的一部分,它被用于许多演示与游戏.它提供了视觉效果很棒的交互特性,而且它还提供了非常大的自由度,几乎允许开发者在浏览器窗口中做任何事情.然而它与JavaScript的

《HTML5 canvas开发详解(第2版)》——1.6 HTML5 Canvas版“Hello World!”

1.6 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事就是,看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.在用Canvas处理图像和声音的时候,这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是

《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节

第2章 直线图形 2.1 直线图形简介 在Canvas中,基本图形有两种:①直线图形:②曲线图形.Canvas常见的直线图形有三种,分另是直线.矩形.多边形. 这一章我们先来学习Canvas中的直线图形. 2.2 直线 2.2.1 Canvas坐标系 在学习Canvas之前,我们先来介绍一下Canvas中的坐标系是如何使用的.了解Canvas使用的坐标系是学习Canvas的最基本的前提. 我们经常见到的坐标系是数学坐标系,而Canvas使用的坐标系是W3C坐标系,这两种坐标系唯一的区别在于y轴正