1.Canvas绘制一个蓝色的矩形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#000099'; ctx.fillRect(0,0,80,100); </script> </body> </html>
显示
2.绘制基本的直线
①绘制直线
<body> <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById("myCanvas"); //获取Canvas对象 var ctx=canvas.getContext("2d"); //获取上下文对象 ctx.beginPath(); //开始一个新的绘制路径 ctx.moveTo(10,10); //定义直线的起点坐标 ctx.lineTo(200,10); //定义直线的终点坐标 ctx.stroke(); //沿着坐标点顺序的路径绘制直线 ctx.closePath(); //关闭当前的绘制路径 </script> </body>
显示：
② 绘制二次曲线：
是直线锥面的两腔被一平面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或者相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、锥圆、双曲线或抛物线。
<body> <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); if(canvas && canvas.getContext){ //判断Canvas对象是否为空 var ctx = canvas.getContext("2d"); //获取Canvas对象上下文 ctx.beginPath(); //开始一个新的绘制路径 ctx.moveTo(100,50); //定义直线的起点坐标为(100,50) ctx.quadraticCurveTo(100,15,300,30); //设置二次曲线坐标 ctx.stroke(); //绘制路径 } </script> </body>
判断Canvas对象是否为空：是因为有些浏览器对Canvas的支持不是很好，为了避免网页运行时出现错误，需要提前判断。
显示：
③绘制贝赛尔曲线
每一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。它的一个起点、一个终点、两个控制点，共四个点决定一条曲线。是用Canvas的bezierCurveTo函数绘制贝赛尔函数
<!doctype html> <html> <head> <meta charset="utf-8"> <title>4.2.3.html</title> </head> <body> <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); if(canvas && canvas.getContext){ //判断Canvas对象是否为空 var ctx = canvas.getContext("2d"); //获取Canvas对象上下文 ctx.beginPath(); //开始一个新的绘制路径 ctx.moveTo(50,200); //定义直线的起点坐标为(50,200) ctx.bezierCurveTo(50,100,200,100,200,150); //设置贝塞尔曲线坐标 ctx.stroke(); //绘制路径 } </script> </body> </html>
显示：
④绘制圆弧
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>4.2.4.html</title> 6 </head> 7 <body> 8 9 <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> 10 11 <script type="text/javascript"> 12 var canvas=document.getElementById('myCanvas'); 13 14 if(canvas && canvas.getContext){ //判断Canvas对象是否为空 15 var ctx = canvas.getContext("2d"); //获取Canvas对象上下文 16 ctx.beginPath(); //开始一个新的绘制路径 17 ctx.arc(100,75,50,0,2*Math.PI*0.75); //设置圆弧坐标 18 ctx.stroke(); //绘制路径 19 } 20 </script> 21 </body> 22 </html>
显示：
3.绘制简单形状
①绘制圆形
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>4.3.1.html</title> 6 </head> 7 <body> 8 9 <canvas id="myCanvas">您的浏览器不支持canvas标签</canvas> 10 11 <script type="text/javascript"> 12 var canvas=document.getElementById('myCanvas'); 13 if(canvas && canvas.getContext){ //判断Canvas对象是否为空 14 var ctx = canvas.getContext("2d"); //获取Canvas对象上下文 15 ctx.beginPath(); //开始一个新的绘制路径 16 ctx.arc(100,75,50,0,2*Math.PI); //设置圆坐标 17 ctx.stroke(); //绘制路径 18 } 19 </script> 20 </body> 21 </html>
显示：
②绘制三角形
绘制三条直线，并设置三条直线的起点和终点相互连接
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <canvas id="myCanvas"></canvas> 10 11 <script type="text/javascript"> 12 var canvas=document.getElementById('myCanvas'); 13 if(canvas && canvas.getContext){ //判断Canvas对象是否为空 14 var ctx=canvas.getContext("2d"); //获取Canvas对象上下文 15 ctx.beginPath(); //开始一个新的绘制路径 16 ctx.moveTo(0,10); //设置三角形的起点 17 ctx.lineTo(200,20); //设置三角形的第二个起点 18 ctx.lineTo(280,100); //设置三角形的第三个起点起点 19 ctx.closePath(); //将三角形第三个点与起点连接 20 ctx.stroke(); //绘制路径 21 } 22 </script> 23 </body> 24 </html>
显示：
③绘制圆角矩阵
将使用arcTo函数绘制圆角矩阵，arcTo（x1,x2,y1,y2,r）:绘制介于两个切线之间的圆弧，坐标点(x1,y1)为圆弧的起点坐标，（x2,y2）为圆弧的终点坐标，r为圆弧的半径。
1 <body> 2 3 <canvas id="myCanvas"></canvas> 4 5 <script type="text/javascript"> 6 var canvas=document.getElementById("myCanvas"); 7 if(canvas && canvas.getContext){ 8 var ctx=canvas.getContext("2d"); 9 ctx.beginPath(); 10 ctx.moveTo(10,10); //在左上方开始 11 ctx.arcTo(100,10,100,20,10); //绘制右上方圆角 12 ctx.arcTo(100,110,90,110,10); //绘制右下方圆角 13 ctx.arcTo( 0,110,0,100,10); //绘制左下方圆角 14 ctx.arcTo( 0,10,10,10,10); //绘制左上方圆角 15 ctx.stroke(); 16 } 17 </script> 18 </body>
显示：
④绘制自定义图形
1 <body> 2 3 <canvas id="myCanvas"></canvas> 4 5 <script type="text/javascript"> 6 var canvas=document.getElementById("myCanvas"); 7 if(canvas && canvas.getContext){ 8 var ctx=canvas.getContext("2d"); 9 ctx.beginPath(); 10 ctx.arc(75,75,50,0,Math.PI*2,true); //在左上方开始 11 ctx.moveTo(110,75); 12 ctx.arc(75,75,35,0,Math.PI,false); //在左上方开始 13 ctx.moveTo(65,65); 14 ctx.arc(60,65,5,0,Math.PI*2,true); //在左上方开始 15 ctx.moveTo(95,65); 16 ctx.arc(90,65,5,0,Math.PI*2,true); //在左上方开始 17 18 ctx.stroke(); 19 } 20 </script> 21 </body>
笑脸：