HTML5 Canvas基础概念（一）

Canvas基础知识：Canvas属于行内元素，使用Canvas绘制图形步骤：

1、获取Canvas对象

2、获取上下文环境对象context。

3、开始绘制图形

在Canvas对象中常用属性

属性	说明
width	Canvas的宽度
height	Canvas的高度

Canvas常用的方法

属性	说明
getContext("2d")	获取Canvas2D上下文环境对象
toDataURL()	获取Canvas对象产生的位图的字符串

• HTML5 Canvas暂时只提供2D绘图API，3D绘图可以使用HTML5的WebGL进行绘制。

基本图形的绘制

在Canvas中，基本图形有直线图形和曲线图形。

1. 直线绘制，使用moveTo()和lineTo()来绘制直线，语法：

ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke()

moveTo()的含义是把画笔移动到起点(x1,y1)，开始绘图。lineTo()含义是将画笔从起点开始画线，一直到终点坐标(x2,y2)。当然，moveTo()和lineTo()方法只是确定起点和终点而已，并没有开始绘制。stroke()方法的含义就是连接起点和终点，完成绘图。当lineTo()重复使用时，最后一个lineTo()就是终点，绘制成多条线。

1. 矩形绘制（描边和填充矩形），可以把moveTo()和lineTo()配合使用绘制一个矩形，但是这样绘制矩形代码量过多，Canvas提供了独立的方法来绘制矩形。语法：

cxt.strokeStyle = 属性值;
ctx.strokeRect(x,y,width,height);

strokeStyle属性取值有三种，即颜色值、渐变色、图案。

strokeRect()方法用于确定矩形的位置坐标。

填充矩形的语法：

ctx.fillStyle = "属性值";
ctx.fillRect(x,y,width,height);

除了使用strokeRect()和fillRect()两种方法外，还可以使用rect()方法。者三种方法的参数是一样的，不同之处在实现效果方面，strokeRect()和fillRect()在调用之后会立即绘制矩形。rect()方法在调用之后并不会立即绘制，还需要调用stroke()或者fill().

rect(x,y,width,height);

还可以使用clearRect()方法清空指定矩形区域

1. 曲线图形，会涉及到两种情况：曲线和弧线。两者是有区别的，弧线是圆周的一部分，曲线则是不一定（当曲线上每一点的曲率都相同时，曲线就是弧线）。

圆形

使用arc()方法来绘制圆形，语法：

ctx.beginPath();
ctx.arc(x,y,redius,startAngle,endAngle,anticlockwise);

其中anticlockwise是一个布尔值，为ture时，按照逆时针绘制圆形，默认值是false。

描边圆形语法：

//状态描述
ctx.beginPath();
ctx.arc(x,y,redius,startAngle,endAngle,anticlockwise);
ctx.closePath();

//描边
ctx.strokeStyle = "颜色值";
ctx.stroke();

例如：半圆与圆形

<canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }

        window.onload = function(){
            var canvas = $("canvas");
            var ctx = canvas.getContext("2d");

            //绘制半圆
            ctx.beginPath();
            ctx.arc(50,50,50,0,Math.PI,true);
            ctx.closePath();

            //描边
            ctx.strokeStyle = 'pink';
            ctx.stroke();

            //圆形
            ctx.beginPath();
            ctx.arc(100,100,50,0,2*Math.PI,true);
            ctx.closePath();

            ctx.strokeStyle = "HotPink";
            ctx.stroke();
        }
    </script>

填充圆形语法：

ctx.beginPath();
ctx.arc(x,y,redius,startAngle,endAngle,anticlockwise);
ctx.closePath();

ctx.fillStyle();
ctx.fill();

上面的例子中圆形填充颜色：

<canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }

        window.onload = function(){
            var canvas = $("canvas");
            var ctx = canvas.getContext("2d");

            //绘制半圆
            ctx.beginPath();
            ctx.arc(50,50,50,0,Math.PI,true);
            ctx.closePath();

            //描边
            ctx.fillStyle = 'pink';
            ctx.fill();

            //圆形
            ctx.beginPath();
            ctx.arc(100,100,50,0,2*Math.PI,true);
            ctx.closePath();

            ctx.fillStyle = "HotPink";
            ctx.fill();
        }
    </script>

1. 弧线，常见的两种方法：arc()和arcTo()。arc()画弧线的语法：

ctx.beginPath();
ctx.arc(x,y,redius,startAngle,endAngle,anticlockwise);

ctx.strokeStyle = "颜色值";
ctx.stroke()

//arc()方法绘制弧线不需要closePath()关闭路劲。因为弧线不是一个闭合的图形。

如：

<canvas id="canvas" width="200" height="200"></canvas>
function $(id){
  return document.getElementById(id);
}

 window.onload = function () {
    var cnv = $("canvas");
    var cxt = cnv.getContext("2d");
    cxt.beginPath();
    cxt.arc(70, 70, 50, 0, - Math.PI /2, true);
    cxt.stroke();

}

arcTo()画弧线

语法：

ctx.arcTo(cx,cy,x2,y2,redius);

//(cx,cy)是控制点的坐标，(x2,y2)是结束点的坐标，
//一般情况下是由moveTo()或者lineTo()提供起点，arcTo()提供控制点和终点

如：

<canvas id="canvas" width="200" height="200"></canvas>
<script>
    function $(id){
      return document.getElementById(id);
    }
    window.onload = function(){
      var canvas = $("canvas");
      var ctx = canvas.getContext("2d");

      //ctx.moveTo(20,20);
      ctx.lineTo(70,20);
      ctx.arcTo(120,20,120,70,50);
      ctx.lineTo(120,120);
      ctx.stroke()
    }
</script>

圆角矩形的封装

<canvas id="canvas" width="200" height="200"></canvas>
<script>
    function $(id){
      return document.getElementById(id);
    }

    window.onload = function(){
      var canvas = $("canvas");
      var ctx = canvas.getContext("2d");
      createRect(ctx,100,100,20,20,20);
      ctx.fillStyle = "HotPink";
      ctx.fill();
    }
    //封装圆角矩形函数
    function createRect(ctx,width,height,r,offsetX,offsetY){
        ctx.beginPath();
        ctx.moveTo(offsetX+r,offsetY);
        ctx.lineTo(offsetX+width-r,offsetY);
        ctx.arcTo(offsetX+width,offsetY,offsetY+width,offsetY+r,r);
        ctx.lineTo(offsetX+width,offsetY+height-r);
        ctx.arcTo(offsetX+width,offsetY+height,offsetX+width-r,offsetY+height,r);
        ctx.lineTo(offsetX+r,offsetY+height);
        ctx.arcTo(offsetX,offsetY+height,offsetX,offsetY+height-r,r);
        ctx.lineTo(offsetX,offsetY+r);
        ctx.arcTo(offsetX,offsetY,offsetX+r,offsetY,r);
        ctx.closePath();
      }
</script>

二次贝塞尔曲线

在canvas中，常见的贝塞尔曲线有两种：二次贝塞尔曲线和三次贝塞尔曲线，使用quadraticCurveTo()方法来绘制二次贝塞尔曲线，语法：

ctx.quadraticCurveTo(cx,cy,x2,y2);
//(cx,cy)表示控制点的坐标，(x2,y2)表示终点坐标

绘制二次贝塞尔曲线需要三个坐标点：起点、控制点和终点。一般是由moveTo()或者lineTo()提供起点，由quadraticCurveTo()提供控制点和终点。如：

<canvas id="canvas" width="500" height="400"></canvas>
<script>
    function $(id){
        return document.getElementById(id);
    }

    window.onload = function(){
        var canvas  = $("canvas");
        var ctx = canvas.getContext("2d");

        ctx.lineTo(30,120);
        //ctx.moveTo(30,120);
        ctx.quadraticCurveTo(100,20,160,120);
        ctx.stroke();
    }
</script>

三次贝塞尔曲线，语法：

ctx.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);

//其中(cx1,cy1),(cx2,cy2)分别是两个控制点，(x,y)是终点。

与二次贝塞尔曲线的区别是，三次贝塞尔曲线有两个控制点，二次贝塞尔曲线只有一个控制点。