HTML5-----Canvas 学习日记1
1:我们经常提到canvas,其实canvas是HTML中一个元素,通常意义上,它称为“画布”,而我们的context,是canvas中的一个对象,称为“绘图环境”
var canvas=document.getElementById("canvas"), //获取canvas对象,注意,canvas是画布,它的获取是通过document来获取的
var context=canvas.getcontext("2d"); //定义一个context的对象,获取绘图环境变量,我们一般都是用二维的。
注意,绘图环境变量的绘制是在canvas的基础上进行的。
2:更改canvas的大小,最好使用直接设置其属性。
因为canvas从本质上来说,有2个属性:1:它自身的大小;2:它的绘图表面的大小。虽然说通过js中改变canvas的height和width也可以更改canvas的大小,但是这么做只更改了canvas的实际大小,它的绘图表面的大小并没有同步更改。而当绘图表面和canvas自身的大小不相符时,浏览器会自动对绘图表面进行一个缩放,使二者相同。比如说,系统默认canvas的大小和绘图表面都是300*150px,js中把canvas大小改成600*300,而绘图表面还是300*150px,所以浏览器会把绘图表面变成600*300px.
3:save 和restore 的用法
save和restore主要是在特定情况下对canvas中一些对象的更改,比如说,我一个js里面绘制了园,矩形,然后我只想在圆的绘制中添加阴影,或者改变圆的线宽,或者是填充色,甚至添加渐变色,可以在圆的function中先save(),把里面的一些环境变量保存到栈里面,然后再进行相应环境对象的更改,特别要注意加上stroke(),或者(fill(),),不然看不见绘制的图形,最后在来一行restore(),把保存的一切环境变量都还原。这样这些改动的变量就不会影响之后的矩形的绘制。