1.会使用的函数
1）beginPath()新建一条路径，生成后，图形绘制命令被指向路径上生成路径
2）closePath()闭合路径后图形绘制命令重新指向到上下文
3）stroke()通过线条来绘制图形轮廓
4）fill()通过填充路径的内容区域生成实心的图形
5）arc(x,y,radius,startAngle,endAngle,anticlockwise)以（x，y）为圆心以radius为半径的圆弧，从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
6）arcTo(x1,y1,x2,y2,radius)根据给定的控制点和半径画一段圆弧，以直线连接两个控制点
7）quadraticCurveTo(cp1x,cp1y,x,y)绘制二次贝塞尔曲线，cp1x、cp1y为控制点一，x、y为结束点
8）bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y）绘制三次贝塞尔曲线，cp1x、cp1y为控制点一，cp2x、cp2y为控制点二，x、y为结束点
Path2D对象：
1）new Path2D()空的path对象
2）new Path2D(path) 克隆path对象
3）new Path2D(d) 从SVG建立Path对象
2.绘制的步骤
1）创建路径起始点
2）画路径
3）封闭路径
4）路径生成，通过描边或填充区域来渲染图形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>day2-1</title> <style type="text/css"> canvas{border:1px solid black;} </style> </head> <body onload="draw()"> <canvas id="tutorial" width="150" height="150"> </canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial') if(canvas.getContext){//判断浏览器是否支持getContext属性 var ctx = canvas.getContext('2d') ctx.beginPath(); ctx.moveTo(25, 25); ctx.lineTo(105,25); ctx.lineTo(25,125); ctx.fill(); ctx.beginPath(); ctx.moveTo(125, 125); ctx.lineTo(125,45); ctx.lineTo(45,125); ctx.closePath(); ctx.stroke(); }else{} } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>day2-2</title> <style type="text/css"> canvas{border:1px solid black;} </style> </head> <body onload="draw()"> <canvas id="tutorial" width="150" height="150"> </canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial') if(canvas.getContext){//判断浏览器是否支持getContext属性 var ctx = canvas.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() }else{} } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>day2-3</title> <style type="text/css"> canvas{border:1px solid black;} </style> </head> <body onload="draw()"> <canvas id="tutorial" width="150" height="200"> </canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial') if(canvas.getContext){//判断浏览器是否支持getContext属性 var ctx = canvas.getContext('2d') for(var i =0;i<4;i++){ for(var j=0;j<3;j++){ ctx.beginPath(); var x=25+j*50; var y=25+i*50; var radius = 20; var startAngle = 0; var endAngle = Math.PI+(Math.PI*j)/2 var anticlockwise = i%2==0?false:true; ctx.arc(x, y, radius,startAngle, endAngle, anticlockwise);//圆心(x,y)半径radius，角度startAngle到endAngle，anticlockwise给定方向（顺时针、逆时针） if(i>1){ ctx.fill() }else{ ctx.stroke() } } } }else{} } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>day2-4</title> <style type="text/css"> canvas{border:1px solid black;} </style> </head> <body onload="draw()"> <canvas id="tutorial" width="150" height="200"> </canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial') if(canvas.getContext){//判断浏览器是否支持getContext属性 var ctx = canvas.getContext('2d') for(var i =0;i<4;i++){ for(var j=0;j<3;j++){ ctx.beginPath(); var x=25+j*50; var y=25+i*50; var radius = 20; var startAngle = 0; var endAngle = Math.PI+(Math.PI*j)/2 var anticlockwise = i%2==0?false:true; ctx.arc(x, y, radius,startAngle, endAngle, anticlockwise);//圆心(x,y)半径radius，角度startAngle到endAngle，anticlockwise给定方向（顺时针、逆时针） if(i>1){ ctx.fill() }else{ ctx.stroke() } } } }else{} } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>day2-5</title> <style type="text/css"> canvas{border:1px solid black;} </style> </head> <body onload="draw()"> <canvas id="tutorial" width="150" height="200"> </canvas> <canvas id="clock" width="150" height="200"> </canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial') if(canvas.getContext){//判断浏览器是否支持getContext属性 var ctx = canvas.getContext('2d') ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); }else{} var canvas2 = document.getElementById('clock') if(canvas2.getContext){//判断浏览器是否支持getContext属性 var ctx = canvas2.getContext('2d') ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25) ctx.bezierCurveTo(85,25,75,37,75,40) ctx.fill() }else{} } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>day2-6</title> <style type="text/css"> canvas{border:1px solid black;} </style> </head> <body onload="draw()"> <canvas id="tutorial" width="200" height="200"> </canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial') if(canvas.getContext){//判断浏览器是否支持getContext属性 var ctx = canvas.getContext('2d') roundedRect(ctx,12,12,150,150,15) roundedRect(ctx,19,19,150,150,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(i=0;i<6;i++){ ctx.fillRect(115,51+i*16,4,4) } for(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="black" ctx.beginPath(); ctx.arc(101,102,2,0,Math.PI*2,true); ctx.fill() ctx.beginPath(); ctx.arc(89,102,2,0,Math.PI*2,true); ctx.fill() }else{} } function roundedRect(ctx,x,y,width,height,radius){ ctx.beginPath(); ctx.moveTo(x,y+radius); 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.stroke(); } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>day2-7</title> <style type="text/css"> canvas{border:1px solid black;} </style> </head> <body onload="draw()"> <canvas id="tutorial" width="200" height="200"> </canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial') if(canvas.getContext){//判断浏览器是否支持getContext属性 var ctx = canvas.getContext('2d') var rectangle=new Path2D(); rectangle.rect(10,10,50,50) var circle = new Path2D() circle.moveTo(125,35) circle.arc(100,35,25,0,2*Math.PI) ctx.stroke(rectangle) ctx.fill(circle) }else{} } </script> </body> </html>
