第一章 基础知识
第一节 canvas元素
HTML代码很直白，没有什么有趣的地方。与大多数基于Canvas的应用程序一样，其中真正有趣的地方在于JavaScript代码。图1-2中所示应用程序的JavaScript代码，列在了程序清单1-2之中。
程序清单1-2 example.js
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
context.font = '38pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
context.fillText('Hello Canvas',canvas.width/2 - 150,
canvas.height/2 + 15);
context.strokeText('Hello Canvas',canvas.width/2 - 150,
canvas.height/2 + 15);
程序清单1-2中的JavaScript代码采用了一个诀窍，在开发基于Canvas的应用程序时也可以这样做：
（1）使用document.getElementById()方法来获取指向canvas的引用。
（2）在canvas对象上调用getContext('2d')方法，获取绘图环境变量（注意，“2d”中的“d”必须小写）。
（3）使用绘图环境对象在canvas元素上进行绘制。
在获取了canvas的绘图环境对象之后，这段JavaScript代码设置了环境对象的font、fillStyle、strokeStyle等属性，然后对文本进行了填充及描边操作，于是就产生了图1-2中所示效果。fillText()方法使用fillStyle属性来填充文本中的字符，strokeText()方法则使用strokeStyle属性来描绘字符的轮廓线。fillStyle与strokeStyle属性可以是CSS格式的颜色、渐变色或是图案。在1.2.1小节之中，我们会简单地讨论一下这些属性，然后在第2章中会深入地讲解以上的属性与方法。
fillText()与strokeText() 都需要3个参数：要绘制的文本内容，以及在canvas中显示文本的横、纵坐标。程序清单1-2中的JavaScript代码，使用了常量来将文本近似地对齐在canvas的中心点。这么做可以在canvas中实现文本居中，但却不是一个良好的通用方案。在第3章中，我们将会看到有一种更好的办法可以用于居中文本。
警告：在设置canvas的宽度与高度时，不能使用px后缀
虽说支持Canvas的浏览器普遍都允许在设定canvas元素的width与height属性时使用px后缀，但是，这么做从技术上来说是不被Canvas规范所接受的。根据规范书，这些属性的取值，只能是非负整数。
提示：默认的canvas元素大小是300×150个屏幕像素
在默认情况下，浏览器所创建的canvas元素是300像素宽、150像素高。可以通过指定width与height属性值而修改canvas元素的大小。
还可以通过CSS属性来改变canvas元素的大小，不过，在下一小节中将会讲到，通过那种方式来修改canvas元素的宽度与高度，可能会产生意外的后果。
1.1.1 canvas元素的大小与绘图表面的大小
前一小节中的那段应用程序代码是通过设置canvas元素的width与height属性，来改变元素大小的。也可以像程序清单1-3那样，通过CSS来设置canvas元素的大小。不过，使用CSS设置canvas元素的效果，与通过width、height属性值来设定，并不一样。
程序清单1-3 使用不同的值来设置元素大小与绘图表面大小
<!DOCTYPE html>
<head>
<title>Canvas element size: 600 x 300,
Canvas drawing surface size: 300 x 150</title>
<style>
body {
background: #dddddd;
}
#canvas {
margin: 20px;
padding: 20px;
background: #ffffff;
border: thin inset #aaaaaa;
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<canvas id='canvas'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
</html>
HTML5 Canvas核心技术—图形、动画与游戏开发
- 作者：
- David.Geary
- 类别：
- 基础信息化
- 出版社：
- 华章出版社
- 出版时间：
- 2013年5月
- 定价：
- ￥99.00
- 京东价：￥79.70
实际售价以e-works战略合作伙伴当日售价为准