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