canvas核心技术与游戏开发—笔记（第一章）

基础知识

1.1 canvas元素

a

var canvas = document.getElementById('canvas'),  //1
    context = canvas.getContext('2d');           //2

使用上1来获取指向canvas的一个引用。
使用2来获得绘图环境变量context（context在此书中被译为绘图环境变量）

    <canvas id="canvas" width="400" height="400">

在html中canvas的高度和宽度设置不使用px单位

b、canvas元素的大小和绘图表面的大小
有两种方法来设置canvas元素的大小，一种是直接在canvas标签中直接修改width和height值，另一种是通过css来设置canvas的大小，两种方式并不一样。使用CSS来修改canvas的大小时，如果同时没有指定canvas元素的width和height，那么当元素大小和绘图表面大小不相符时，浏览器会自动缩放后者，使之自动符合前者的大小。

1.2 Canvas的绘图环境
1.2.1中列出了绘图环境中的所有属性
1.2.2介绍了canvas中的两个方法save和restore两个方法，用于保存和恢复当前canvas绘图环境的所有属性。
1.4开发环境介绍和性能分析工具
1.5学习绘制时钟