arc(x, y, radius, startAngle, endAngle, anticlockwise)

该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

绘制一个圆圈：

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.arc(100, 100, 50, 0, Math.PI*2, true);// 绘制圆圈轨迹 ctx.stroke();

练习：绘制笑脸

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //绘制笑脸 ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI*2, true);// 绘制圆圈轨迹 ctx.moveTo(110, 75); ctx.arc(75, 75, 35, 0, Math.PI, false);// 绘制圆圈轨迹 ctx.moveTo(65, 65); ctx.arc(60, 65, 5, 0, Math.PI*2, true);// 绘制圆圈轨迹 ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI*2, true);// 绘制圆圈轨迹 ctx.stroke();

练习：绘制两个三角形

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //绘制两个三角形 ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); ctx.lineTo(50, 150); ctx.fill(); ctx.beginPath(); ctx.moveTo(170, 70); ctx.lineTo(170, 170); ctx.lineTo(70, 170); ctx.closePath(); ctx.stroke();

绘制曲线

使用 贝塞尔函数

quadraticCurveTo(cp1x, cp1y, x, y)

绘制贝塞尔曲线，cp1x,cp1y为控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制二次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

绘制上上图曲线的代码如下：

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(100,100); ctx.quadraticCurveTo(150,50,200,100); ctx.quadraticCurveTo(250,150,300,100); ctx.quadraticCurveTo(350,50,400,100); ctx.stroke();

练习：绘制聊天气泡

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //绘制聊天小气泡 ctx.beginPath(); ctx.moveTo(100,130); ctx.quadraticCurveTo(100,100,130,100); ctx.lineTo(270,100); ctx.quadraticCurveTo(300,100,300,130); ctx.lineTo(300,200); ctx.quadraticCurveTo(300,230,270,230); ctx.lineTo(175,230); ctx.quadraticCurveTo(140,280,100,280); ctx.quadraticCurveTo(130,280,150,230); ctx.lineTo(130,230); ctx.quadraticCurveTo(100,230,100,200); ctx.closePath(); ctx.stroke();

练习：绘制心形

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //绘制心形 ctx.beginPath(); ctx.moveTo(100,130); ctx.bezierCurveTo(100,50,170,50,200,100); ctx.bezierCurveTo(230,50,300,50,300,130); ctx.bezierCurveTo(300,140,300,210,200,250); ctx.bezierCurveTo(100,200,100,140,100,130); ctx.stroke();

综合练习：绘制吃豆子

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //绘制吃豆子 roundedRect(ctx,12,12,195,174,15); roundedRect(ctx,19,19,180,160,9); roundedRect(ctx,53,53,49,33,10); roundedRect(ctx,53,119,49,16,6); roundedRect(ctx,135,53,49,33,10); roundedRect(ctx,135,119,25,49,10); ctx.beginPath(); ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); ctx.lineTo(31,37); ctx.fill(); for(var i=0; i<8; i++){ ctx.fillRect(51+i*16,35,4,4); } for(var i=0; i<6; i++){ ctx.fillRect(115,51+i*16,4,4); } for(var i=0; i<8; i++){ ctx.fillRect(51+i*16,99,4,4); } ctx.beginPath(); ctx.moveTo(83,116); ctx.lineTo(83,102); ctx.bezierCurveTo(83,94,89,88,97,88); ctx.bezierCurveTo(105,88,111,94,111,102); ctx.lineTo(111,116); ctx.lineTo(106.333,111.333); ctx.lineTo(101.666,116); ctx.lineTo(97,111.333); ctx.lineTo(92.333,116); ctx.lineTo(87.666,111.333); ctx.lineTo(83,116); ctx.fill(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91,96); ctx.bezierCurveTo(88,96,87,99,87,101); ctx.bezierCurveTo(87,103,88,106,91,106); ctx.bezierCurveTo(94,106,95,103,95,101); ctx.bezierCurveTo(95,99,94,96,91,96); ctx.moveTo(103,96); ctx.bezierCurveTo(100,96,99,99,99,101); ctx.bezierCurveTo(99,103,100,106,103,106); ctx.bezierCurveTo(106,106,107,103,107,101); ctx.bezierCurveTo(107,99,106,96,103,96); ctx.fill(); ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(101,102,2,0,Math.PI*2,true); ctx.arc(89,102,2,0,Math.PI*2,true); ctx.fill(); roundedRect(ctx,x,y,width,height,radius){ ctx.moveTo(x,x+radius); ctx.beginPath(); ctx.lineTo(x,y+height-radius); ctx.quadraticCurveTo(x,y+height,x+radius,y+height); ctx.lineTo(x+width-radius, y+height); ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); ctx.lineTo(x+width,y+radius); ctx.quadraticCurveTo(x+width,y,x+width-radius,y); ctx.lineTo(x+radius,y); ctx.quadraticCurveTo(x,y,x,y+radius); ctx.closePath(); ctx.stroke(); }

附加知识：




注：附加知识属于提高或者不重要的知识，可以像思考题一样对待

Path2d()

Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。