html5+css3【4】

绘制文字

绘制字体时可以使用filltext方法或者stroketext方法。
filltext方法用填充的方式来绘制字符串：context.filltext ( text , x,y,[maxwidth]);
stroketext方法用轮廓的方式来绘制字符串：context.stroketext（text,x,y,[maxwidth]）;
第一个参数text表示要绘制的文字，第二个参数x表示要绘制的文字的起点横坐标，第三个参数y表示要绘制的文字的起点纵坐标，第四个参数maxwidth为可选参数（可以不填写），表示显示文字时最大的宽度，可以防止文字溢出。

设置文字字体

context.font = “font-weight font-size font-family”；
context.font有三个参数，
第一个参数 font-weight：

normal	默认值，定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100-900	定义由粗到细的字符。400位normal，700为bold

第二个参数font-size规定文本的字体尺寸

第三个参数font-family规定文本的字体系列
font-family可以填的值是一种或多种。若填多种字体则会按照顺序查找，若第一种字体没有就显示下一种直到存在字体。

设置文字垂直对齐方式

context.textbaseline = ‘alphabetic’；
属性值可以是top（顶部对齐）、hanging（悬挂）、middle（中间对齐）、bottom（底部对齐）、alphabetic是默认值。

设置文字水平对齐方式

context.textalign = “start”
属性值可以设置为：start、end、left、right、center。

保存文件

很多时候绘制完成的图片需要保存，那么我们就可以使用到canvasAPI来完成。
canvasAPI使用toDataURl方法把绘画的状态输出到一个dataURL中然后重新装载，然后我们就可以把重新装载后的文件直接保存。
canvasAPI保存文件的原理实际上就是把我们绘画的状态动态输出到一个data URL地址所指向的数据中的过程。

什么是dataURL？
dataURL实际上就是base64位编码的URL，主要用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入数据，比如img元素里面的图像文件。
dataURL的格式为“data：image/jpeg;base64,/9j/4…”

toDataURL的使用方法：
canvas.toDataURL(type);
这个方法使用一个参数type，表述输出数据的MIME类型。(MIME类型：jpg image/jpeg)

canvas制作动画

在canvas画布中制作动画相对来说很简单，实际上就是不断变化坐标、擦除、重绘的过程。

1.使用setinterval方法设置动画的间隔时间。
	setinterval（code，millisec）
	setinterval方法HTML中固有方法，之歌方法接受两个参数，第一个函数表示执行动画的函数，第二个参数为间隔时间，单位是（毫秒）。
2.用来绘图的函数
	1）通过不断变换x和y的坐标来实现动画效果。
	2）在该函数中先用clearRect方法将画布整体或者是局部擦除。
		擦除图像clearRect方法：
		context.fillRect(x,y,width,height);
		x是指我们起点的横坐标，y是指我们起点的纵坐标，width是指擦子的长度，height是指擦子的高度。