Canvas画布

Canvas画布  

1.canvas标签  

严禁使用CSS调整canvas画布的大小。 <canvas  width="600" height="600"> 您的破浏览器有不支持了！ </canvas> 

2.canvas的属性  

Width 用户设置canvas画板的宽度 Height 用于设置canvas画板的高度。  使用CSS可以设置canvas画布的显示大小无法设置其绘图面积，所以不推荐使用。 

3.canvas的方法  

getContext()  用于获取canvas元素的绘图环境，所有绘图操作必须在绘图环境下操作.绘图环境也叫做绘图上下文。  Canvas元素.getContext(‘2d’); 获取2D绘图环境 

4.绘图操作(绘图环境的成员  context.font属性  

用于设置字体的风格大小和0字体类型等 格式：context.font([粗体],[斜体],大小,字体)； 该属性设置对描边文字和填充文字都有效 context.fillStyle属性 用于设置填充类型的画笔的样式 

格式： context.fillStyle=’颜色值’

所有CSS3的颜色类型都可以支持  

context.strokeStyle属性  用于设置描边类型的画笔的样式 

格式：context.strokeStyle=’颜色’;    

注意：设置style时一般使用颜色设置，实际上可以使用渐变设置但是需要渐变对象。所以不叫strokeColor而是叫strokeStyle   

Context.fillText() 方法  用于使用填充画笔进行文字绘制 

格式：context.fillText(‘文字内容’,x坐标,y坐标); 

Context.strokeText()方法 用描边画笔进行文字绘制 

格式：context.strokeText(‘文字内容’,x坐标,y坐标);    

Context.moveTo()  将画笔移动到指定的位置 

格式：context.moveTo(x1,y1);  

Context.lineTo()   将画笔从开始位置连线到结束位置 

格式:contxt.lineTo(x2,y2);  

注意：使用路径操作时，绘制方法只是在内存中进行预先绘制，并没有实际操作到画布当中，如果需要画布中显示，则需要封闭路径的相关操作。  

Context.stroke() 使用描边画笔将路径绘制出来 

格式：Context.stroke()无参数 Context.textAlign=位置值