Canvas绘制图形

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>

显示：

④绘制圆弧

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>4.2.4.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.arc(100,75,50,0,2*Math.PI*0.75);        //设置圆弧坐标
     ctx.stroke();                                    //绘制路径
 }
 </script>
 </body>
 </html>

显示：

3.绘制简单形状

①绘制圆形

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>4.3.1.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.arc(100,75,50,0,2*Math.PI);                //设置圆坐标
     ctx.stroke();                                    //绘制路径
 }
 </script>
 </body>
 </html>

显示：

②绘制三角形

绘制三条直线，并设置三条直线的起点和终点相互连接

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>

    <canvas id="myCanvas"></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(0,10);                      //设置三角形的起点
            ctx.lineTo(200,20);                    //设置三角形的第二个起点
            ctx.lineTo(280,100);                   //设置三角形的第三个起点起点
            ctx.closePath();                       //将三角形第三个点与起点连接
            ctx.stroke();                          //绘制路径
        }
    </script>
 </body>
 </html>

显示：

③绘制圆角矩阵

将使用arcTo函数绘制圆角矩阵，arcTo（x1,x2,y1,y2,r）:绘制介于两个切线之间的圆弧，坐标点(x1,y1)为圆弧的起点坐标，（x2,y2）为圆弧的终点坐标，r为圆弧的半径。

 <body>

     <canvas id="myCanvas"></canvas>

     <script type="text/javascript">
         var canvas=document.getElementById("myCanvas");
         if(canvas && canvas.getContext){
             var ctx=canvas.getContext("2d");
             ctx.beginPath();
             ctx.moveTo(10,10);            //在左上方开始
             ctx.arcTo(100,10,100,20,10);  //绘制右上方圆角
             ctx.arcTo(100,110,90,110,10); //绘制右下方圆角
             ctx.arcTo( 0,110,0,100,10);    //绘制左下方圆角
             ctx.arcTo( 0,10,10,10,10);    //绘制左上方圆角
             ctx.stroke();
         }
     </script>
 </body>

显示：

④绘制自定义图形

 <body>

 <canvas id="myCanvas"></canvas>

 <script type="text/javascript">
     var canvas=document.getElementById("myCanvas");
     if(canvas && canvas.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();
     }
 </script>
 </body>

笑脸：