CANVAS 2D详解

        使用canvas的必要条件是在HTML标签中定义canvas容器：

<div class="cas">
    <canvas id="canvasEle">
        sorry, this browser do not support canvas now!
    </canvas>
</div>

        因为canvas标签在HTML中是不可用css进行编辑的，所以可以直接让一个div包裹住这个canvas画布。

        接下来就是使用js脚本来实现对画布的编辑：

var canvas = document.getElementById("canvasEle"); // 获取canvas画布容器
var ctx = canvas.getContext("2d"); // 获取上下文

// canvas画布的大小不能用canvas.style.width/height来设定
canvas.height = 720;
canvas.width = 1276;
canvas.style.border = "2px solid pink"; // 这个border是会算进画布宽度中的，会导致canvas.width的实际值比设定值大4px

        以上两行代码是必要的，首先获取canvas标签对象，紧接着获取上下文对象ctx，ctx对象中包含了绝大部分绘制canvas上下文的方法。

        接下来就是利用ctx对象中的方法对canvas画布进行编辑：        

// 等边三角形函数
function triangle(left, top, sideLength) {
   ctx.beginPath(); // 开始路径
   ctx.moveTo(left, top); // 设定起点
   ctx.lineTo(left - 1/2 * sideLength, 0.87 * sideLength + top); // 设定直线
   ctx.lineTo(1/2 * sideLength + left, 0.87 * sideLength + top);
   ctx.closePath(); // 结束路径
   ctx.fillStyle = "pink"; // 设置填充样式
   ctx.strokeStyle = "#000000"; // 设置描边样式
   ctx.fill(); // 填充
   ctx.stroke(); // 描绘路径
}

triangle(100, 200, 100);

        在进行图形绘制时，必须以ctx.beginPath()方法开始，也必须以ctx.closePath()方法结束，绘图的点以及线必须在开始和结束方法中间。

        ctx.moveTo()方法是图形绘制的起点，参数是x坐标、y坐标。

        ctx.lineTo()方法是绘制一条线，参数也是x坐标、y坐标，可以想象是从图形绘制的起点射出的一条射线到参数坐标。

        ctx.stroke()方法就是在所有点线确定完成后进行路径描绘，将所有设定的点通过设定的线方法进行绘制，可以用ctx.strokeStyle进行颜色设置。

        ctx.fill()是对图形进行填充，可以用ctx.fillStyle进行颜色设置。

        养成良好习惯，将每一个图形封装成一个函数。

       效果如图：

        接下来利用ctx.fillRect()方法来直接绘制矩形图：

     // 矩形函数
    function rectBlue(left, top, width, height, opacity) {
        ctx.fillStyle = "rgba(0, 0, 255," + opacity + ")";
        ctx.strokeStyle = "rgb(0, 0, 255)";
        ctx.fillRect(left, top, width, height); // 矩形可以直接使用fillRect方法渲染
        ctx.strokeRect(left, top, width, height); // 绘制矩形边框
    }
    function rectRed(left, top, width, height, opacity) {
        ctx.fillStyle = "rgba(255, 0, 136," + opacity + ")";
        ctx.strokeStyle = "rgb(255, 0, 136)";
        ctx.fillRect(left, top, width, height); // 矩形可以直接使用fillRect方法渲染
        ctx.strokeRect(left, top, width, height); 
    }

    rectBlue(200, 100, 50, 50, 1);
    rectRed(225, 125, 50, 50, 0.38);

        ctx.fillRect()方法是ctx包含拿的唯一一个能够直接绘制不需设置起始点等属性的方法。以上代码运行如图：

         可以利用opacity属性来控制图片的透明度，达到实现图片叠加的效果。先创建的图形在后创建的图形底部。

        利用ctx.clearRect()方法清除一块矩形区域：

// 清除重叠区域的函数
    function clearOverlap(left, top, width, height) {
        ctx.clearRect(left, top, width, height); // 利用clearRect方法来实现去掉某块矩形区域
    }

    clearOverlap(225, 125, 25, 25);

        比如我们要将上图完成创建的两个叠加矩形中删除掉重叠的部分，其中的一些参数x、y坐标以及要清除矩形的宽高是需要自己去计算的。效果如图：

         接下来介绍ctx.arc(x, y, radius, statrAngle, endAngle, clockwise)方法，这是一个绘制圆弧的方法。x和y参数即圆的圆心，radius是圆的半径，startAngle和endAngle是圆弧的启示和结束弧度，两者配合可以实现圆弧的路径，比如代码中的startAngle=0,endAngle=2*Math.PI时，就是一个完整的圆，startAngle=0，endAngle=Math.PI，clockwise=true时，就是一个开口向上的半圆，或clockwise=false时，就是一个开口向下的半圆。同理，可以通过这三个参数值设置不同的圆弧。

    // 按照圆心绘制圆弧 参数依次是圆心坐标、半径、其实和结束时的弧度，绘制方向(true为顺时针，                    false为逆时针)
    function arc(x, y, radius, startAngle, endAngle, clockwise) {
        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
        ctx.strokeStyle = "#33FFFF";
        ctx.stroke();
    }

    arc(400, 150, 50, 0, 2 * Math.PI, true);
    arc(400, 200, 50, 0, Math.PI, false);
    arc(400, 300, 50, 0, Math.PI, true);

        效果如图：

        接下来介绍利用切线来绘制圆弧的方法。ctx.arcTo(x1, y1, x2, y2, radius)，其中，x1,y1两个参数是从第一个与圆弧相切的点延长出来的，x2,y2两个参数是从x1,y1这个点延长出来的第二个与圆弧相切的点，radius就是圆弧的半径。

// 按照两条切线绘制圆弧
    function arcTo(x0, y0, x1, y1, x2, y2, x3, y3, radius) {
        // 开始绘制弧线
        ctx.beginPath();
        // 确定第一个与圆相切的点
        ctx.moveTo(x1, y1);
        // 利用arcTo方法绘制圆弧
        ctx.arcTo(x2, y2, x3, y3, radius);
        ctx.lineTo(x3, y3);
        ctx.strokeStyle = "#FF0000";
        ctx.stroke();
        ctx.closePath();
        // 两条切线和延长线
        ctx.beginPath();
        ctx.moveTo(x0 - radius, y0);
        ctx.lineTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x3, y3 + radius);
        ctx.strokeStyle = "#33FFFF";
        ctx.stroke();
        ctx.closePath();
    }

arcTo(700, 100, 600, 100, 700, 100, 700, 200, 200);

        效果如图：在本例中，与圆相切的点并不在设定的两个点上，而是在其与圆弧的延长线上，这是因为设定圆弧的半径大小问题。

        接下来介绍canvas中的文字渲染，在canvas中文字的渲染实际与图片类似，都需要使用到ctx对象中的方法，也都需要通过方法中的函数对文字进行定位。

        ctx中渲染文字的方法有两种，ctx.fillText(content, x, y, maxWidth)方法是渲染实心的一段文字，其中content参数是文本内容，x,y参数是文字显示的位置，maxWidth是文字渲染的最大宽度。ctx.strokeText(content, x, y, maxWidth)方法是渲染空心文字，参数与ctx.fillText()方法一致。

        在方法渲染前可以通过ctx.font来设定文字样式、大小、字体，通过ctx.textAlign来设定文字对齐方式（左对齐、右对齐、居中等），通过ctx.textBaseline来设定文字垂直方向对齐（上方、居中、下方）。想要修改字体颜色的话，需要在渲染文字之前使用ctx.fillStyle或ctx.strokeStyle来设定颜色。

// 文字渲染
    function initText(type, content, x, y, maxWidth) {
        if (type === "entity") {
            ctx.font = "bold 24px Arial"; // 文字样式  
            ctx.textAlign = "center"; // 文字水平对齐
            ctx.textBaseline = "middle"; // 文字垂直对齐
            ctx.fillStyle = "#000000";
            ctx.fillText(content, x, y, maxWidth);  // 实心文字渲染方法
        }
        else {
            ctx.font = "bold 24px Arial";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.strokeText(content, x, y, maxWidth); // 空心文字渲染方法
        }
    }

    initText("entity", "这是一段实心文字", 900, 200, 200);
    initText("hollow", "这是一段空心文字", 900, 200, 200);

        本例中实心文字以及空心文字是渲染到一个位置上，而且颜色设定也不同，实现了一个文字阴影的效果。效果如图：