canvas-基本知识
canvas是一个通过js来实现绘图的容器，我们使用<canvas>来作为绘图的容器，在这个系列教程内，将会通过一个一个实例从浅到深了解canvas，并且可以实现一般的游戏开发。
- 在HTML页面中创建canvas
- 使用canvas来绘制物体
- canvas的绘图环境(2d)
1.在HTML页面中创建canvas
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="can">Your Browser does not support Canvas, please upgrade</canvas>
</body>
</html>
<script type="text/javascript">
window.onload=()=>{
var can=document.getElementById('can');
can.width = window.innerWidth;
can.height = window.innerHeight;
can.style.background = 'lightblue';
}
</script>
- 使用canvas标签来创建容器，在标签内输入文字是为了防止浏览器版本不支持canvas环境而不显示效果
- 使用script标签来将我们所需要的js代码包裹起来
- 使用window.onload方法来确保加载的完成，防止页面元素获取不到而抛出undefined的错误
- 使用document.getElementById的方法来获取id名为can的画布元素
- 直接设置width与height属性与window的大小同样，这里不需要通过style来写，不然需要使用
can.style.height=xxx+'px';这种写法
注意: 很多地方不会告诉你在设置canvas高宽时不能使用带px的写法，也就是5中我所写到的另外一种写法，不是说不可以，而是这种方式不在canvas的技术之内，属于css的写法，而且使用这种写法的时候，而忘了设置canvas的宽高，可能会导致浏览器对画布进行缩放，从而产生很奇怪或者无效的效果。
2. canvas来绘制物体的准备
getContext('2d'):返回canvas上下文环境
example:var ctx=can.getContext('2d');通过方法获取上下文环境，设置为2d，同时参数支持webgl,这个属于3D部分，这里不做介绍。
在获取了上下文环境后，就可以开始去对canvas进行绘制。
3. canvas的绘图环境(2d)
canvsa作为一款图形引擎，有着强大的API支持来帮助我们来完成我们所需要的图形，动画与特效，而且在2d图形内，我们不需要考虑z轴的变化，相对于3D的操作，简便了很多。
这些是canvas2d对象所包含的属性，可直接调用，同时js作为脚本语言，也可以通过js来向canvas2d对象中添加新的属性。
canvas的绘图机制是一种状态机的方式，比如说使用ctx.fillStyle='red'后绘制的所有填充图形都会是红色，直到你重新设置canvas2d的对象属性。为了方便对当前绘图状态的存储与还原，canvas提供了save与restore的方法接口，每当你使用ctx.save()的时候，canvas都会自动将当前状态存储到状态堆栈顶部，然后ctx.restore()则是从顶部弹出一个状态，这样，我们以后将可以快速对绘图状态的存储与还原。
欢迎加入web图形学（canvas），群聊号码：160190246
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
