前言：
上节课使用canvas作图主要是通过lineTo()方法去实现的，这节课学习更多的canvas的API
1.绘制矩形API(rect、strokeRect、fillRect)
作用：通过rect、strokeRect、fillRect直接完成矩形的绘制，不需要再通过lineTo()的方法进行描点、描线
方法：rect(x, y, width, height)、strokeRect(x, y, width, height)、fillRect(x, y, width, height)
x/y：表示开始绘图的坐标位置。
width：表示绘图矩形的宽。
height：表示绘图矩形的高。
矩形示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> var cas = document.getElementById( 'cas' ); var ctx = cas.getContext( '2d' ); // 1. rect ctx.strokeStyle = 'red'; ctx.fillStyle = 'red'; // 只是完成矩形图形的描绘 ctx.rect( 100, 20, 200, 100 ); ctx.stroke(); // 2. strokeRect ctx.beginPath(); ctx.strokeStyle = 'green'; ctx.fillStyle = 'green'; // 完成矩形的绘制 ctx.strokeRect( 100, 140, 200, 100 ); // 3. fillRect ctx.beginPath(); ctx.strokeStyle = 'blue'; ctx.fillStyle = 'blue'; // 完成矩形的填充绘制，默认填充为黑色 ctx.fillRect( 100, 260, 200, 100 ); </script>
2.擦除矩形clearRect(x, y, widht, height)
作用：通过clearRect方法可以清楚指定区域的矩形
方法：clearRect(x, y, width, height)
x/y：表示矩形的坐标位置。
width：表示矩形的宽。
height：表示矩形的高。
示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> var cas = document.getElementById( 'cas' ); var ctx = cas.getContext( '2d' ); ctx.fillRect( 100, 250, 100, 80 ); // 从x，y为(160,170)的位置开始擦除宽为20，高为150的矩形区域 ctx.clearRect( 160, 170, 20, 150 ); </script>
3.绘制圆弧arc(x,y,r,sAngle,eAngle,counterclockwise)
注意：圆弧的0角位置是X轴坐标轴的正方向，顺时针表示正，逆时针表示负
作用：通过arc方法可以绘制圆弧
方法：arc(x,y,r,sAngle,eAngle,counterclockwise)
x/y：表示绘图的其实位置。
r：表示圆的半径。
sAngle：表示圆弧开始的弧度值(弧度制)
eAngle：表示圆弧结束的弧度值(弧度制)
counterclockwise：表示圆弧绘制的方向(顺时针、逆时针)，false是顺时针，true是逆时针
示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> var cas = document.getElementById( 'cas' ); var ctx = cas.getContext( '2d' ); // 绘制一个在画布正中间的半圆 // 前两个参数表示圆弧的圆心坐标 // 第三个参数是圆弧的半径 // 后面的两个参数分别表示圆弧开始的角度与结束的角度 ctx.arc( cas.width / 2 + 100, cas.height / 2, 50, 0, Math.PI, false); ctx.stroke(); </script>
4.绘制三等份饼形图
作用：通过arc方法可以绘制圆弧
示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> // 处理弧度与角度的计算 function toAngle ( radian ) { return radian * 180 / Math.PI; } function toRadian ( angle ) { return angle * Math.PI / 180; } var cas = document.getElementById( 'cas' ); var ctx = cas.getContext( '2d' ); var x0 = cas.width / 2, y0 = cas.height / 2; var colors = 'red,green,blue'.split( ',' ); // -90表示坐标轴y正方向 var startAngle = -90; for ( var i = 0; i < 3; i++ ) { ctx.beginPath(); ctx.fillStyle = colors[ i ]; ctx.moveTo( x0, y0 ); ctx.arc( x0, y0, 100, toRadian( startAngle ), toRadian( startAngle+=120 ) ); ctx.fill(); } </script>
5.根据数据绘制百分比饼形图
作用：通过arc方法可以绘制圆弧
示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> // 处理弧度与角度的计算 function toAngle ( radian ) { return radian * 180 / Math.PI; } function toRadian ( angle ) { return angle * Math.PI / 180; } var cas = document.getElementById( 'cas' ); var ctx = cas.getContext( '2d' ); //保存所有的人员数据的数组cs01 var cs01 = [12,53,3]; //所有的颜色 var colors = ['red','green','blue']; //求和sum var sum = 0; //开始角度 var start = -90; //通过forEach求和， cs01.forEach(function(v){sum+=v;}); //通过map映射成一个新数组，数组中的内容包含一个个的对象，对象中包含人数信息和角度信息 cs01 = cs01.map(function(v,i){ return {v:v,radius:v/sum*360}; }); //通过循环打印饼形 cs01.forEach(function(v,i){ ctx.beginPath(); ctx.fillStyle = colors[i]; //console.log(v.radius); ctx.moveTo(200,300); ctx.arc(200,300,100,toRadian(start),toRadian(start+=v.radius) ) ; ctx.fill(); }); </script>
6.绘制文本context.fillText(text,x,y,maxWidth)
作用：在画布上绘制文本
方法：
text：表示绘制的文字
x/y：表示开始绘制的位置
maxWidth：表示允许绘制的最大长度。
示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> // 绘制文本 ctx.beginPath(); // 设置字体 ctx.font = '30px Consolas'; // 设置文本填充颜色 ctx.fillStyle = 'black'; // 绘制填充文本 ctx.fillText( 'Hello JavaScript', 100, 100 ); // 绘制正常文本 ctx.strokeText( 'Hello JavaScript', 100, 300 ); </script>
6.绘制带有提示信息的饼形图
作用：在饼形图上显示响应的提示信息，使饼形图更直观。
示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> // 处理弧度与角度的计算 function toAngle ( radian ) { return radian * 180 / Math.PI; } function toRadian ( angle ) { return angle * Math.PI / 180; } var cas = document.getElementById( 'cas' ); var ctx = cas.getContext( '2d' ); // 绘制三等分饼形图 var x = cas.width / 2, y = cas.height / 2, r = 100; var step = 120, start = -90; // 颜色 var colors = [ 'red', 'green', 'blue' ]; // 文字就使用与饼颜色相同的颜色. 写 33.3 % var x1, y1; // 记录文字的坐标 var distance = 30; // 超出圆饼的距离, 用于计算文字的坐标 // 绘制饼 for ( var i = 0; i < 3; i++ ) { // 绘制扇形 ctx.beginPath(); ctx.fillStyle = colors[ i ]; ctx.moveTo( x, y ); ctx.arc( x, y, r, toRadian( start ), toRadian( start + step ) ); ctx.fill(); // 绘制文本 // 绘制直线 ctx.beginPath(); ctx.strokeStyle = colors[ i ]; ctx.moveTo( x, y ); x1 = x + (r + distance) * Math.cos( toRadian(start + step / 2) ); y1 = y + (r + distance) * Math.sin( toRadian(start + step / 2) ); ctx.lineTo( x1, y1 ); ctx.stroke(); // 写文字 ctx.font = '20px Consolas'; if ( start + step / 2 < 270 && start + step / 2 > 90 ) { ctx.textAlign = 'right'; } ctx.fillText( '33.333 %', x1, y1 ); start += step; } </script>