Canvas绘图API

　　Canvas就是一个画布，可以进行任何的线、图形、填充等一系列的操作。

　　Canvas的Context对象

　要使用Canvas来绘制图形必须在页面中添加Canvas的标签

　　<p>请使用支持html5的浏览器查看实例</p>

　</canvas>

　id是必须的，js要用id来那当前的Canvas的Dom对象。通过次Cancas的Dom对象就可以获取它的上下文(Context)。

　　var canvasDom = document.getElementById("canvaDemo");

　　var context = canvasDom.getContext('2d');

　</script>

　Context上下文默认两种绘制方式：绘制线(stroke)或填充(fill)。

　　Canvas绘制步骤：创建HTML页面，设置画布标签。编写js，获取画布dom对象。通过canvas标签的dom对象获取上下文。设置绘制样式、颜色。绘制矩形或填充矩形。

　<body>

　　　　<p>请使用支持HMTL5的浏览器查看本实例</p>

　　</canvas>　

　　　　var canvasDom = document.getElementById("canvasDemo");

　　　　var context = canvas.getContext('2d');

　　　　context.strokeStyle="red";

　　　　context.stroke.Rect(10,10,190,100);

　　　　context.fillStyle="blue";

　　　　context.fillRect(110,110,100,100);

　　</script>

　</body>

　　Canvas绘制线条

　Context对象的beginPath方法表示开始绘制路径，moveTo(x,y)方法设置线段的起点，lineTo(x,y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。

　<body>

　　　　var canvasDom = document.getElementById("canvasDemo");

　　　　var context = canvasDom.getContext("2d");

　　　　context.beginPath(); //开始路径绘制

　　　　context.moveTo(20, 20); //设置路径起点坐标为(20, 20)

　　　　context.lineTo(200, 200); //绘制一条到(200,20)的直线

　　　　context.lineTo(400, 20);

　　　　context.closePath();

　　　　context.lineWidth = 2.0; //设置线宽

　　　　context.strokeStyle = "#CC0000"; //设置线条颜色

　　　　context.stroke(); //对颜色进行着色，此时线条才可见

　　</script>

　</body>

　　Canvas绘制文本

　Context上下文对象的fillText(string x, y)方法是用来绘制文本。他的三个参数分别为文本内容、起点的x坐标，y坐标。使用之前，需用font设置文本、大小、样式。strokeText方法用来添加空心字。fillText方法不支持文本断行，即所有文本出现在一行。若要生成多行文本，只有调用多次fillText方法。

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

　　　var context = canvasDom.getContext("2d");

　　　context.moveTo(200, 200);

　　　context.font = "Bold 50px Arial";

　　　context.textAlign = "left";

　　　context.fillStyle = "#005600";

　　　context.fillText("哈哈", 10, 50);

　　　context.strokeText("blog.itjeek.com", 10, 100);

　</script>

　　Canvas绘制图形和椭圆

　Context的arc方法就是绘制原形或椭圆，arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAnlge则是扇形的起始角度和终止角度，anticlockwise表示做图形时是逆时针(true)还是顺时针(false)。

　　　var canvasDom = document.getElementById("canvasDemo");

　　　var context = canvasDom.getContext("2d");

　　　context.beginPath();

　　　context.arc(60, 60, 50 , 0, Math.PI * 2, true);

　　　context.lineWidth = 2.0;

　　　context.strokeStyle = "#000";

　　　context.stroke();

　</script>

　　Canvas绘制图片

　　var canvasDom = document.getElementById("canvasDemo");

　　var context = canvasDom.getContext("2d");

　　var image = new Image();

　　image.src = "images/a.png";

　　image.onload = function(){

　　　　for(var i = 0 ; i < 10 ; i++){　　

　　　　　　context.drawImage(image, 100+i*80, 100+i*80);

　　　　}

　　};

　</script>