学习canvas绘图

canvas的方法：

beginPath()：开始绘制

moveTo(x,y)：创建一个点，不绘制线条

lineTo(x,y)：创建一个点并且绘制相应坐标的线条

rect(x,y,width,height)：绘制矩形

fillRect(x,y,width,height)：绘制填充颜色的矩形

strokeRect(x,y,width,height)：绘制无填充颜色的矩形

arc( x , y , r , startAngle , endAngle )：绘制圆形

stroke()：绘制已经描绘的图形、线条等

fill()  ：填充已经描绘的图形、线条等，可以与 fillStyle = "color"配合使用

fillText(text,x,y):填充文字，用fillFont = "字体"设置文字属性

drawImage(img,width,height): 绘制图片

绘图步骤：

1、判断浏览器是否支持canvas

2、找到canvas元素，创建context对象

3、开始绘图

html   : <canvas id="canvas" width = "300" height = "300" ></canvas>

script :

var c = document.getElementById("canvas");

var ctx = getContext("2d");

//绘制一个矩形

ctx.beginPath();

ctx.rect(10,10,50,50);

ctx.stroke();

//绘制一个圆形  2*Math.PI表示360°

ctx.beginPath();

ctx.arc(150,150,50,0,2*Math.PI);

ctx.stroke();