canvas API总结

canvas简介

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成， 标签只是图形容器，您必须使用脚本来绘制图形，可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

创建并设置canvas画布

一个画布在网页中是一个矩形框，通过canvas> 元素来绘制.
注意: 默认情况下 元素没有边框和内容。
简单实例如下:

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 元素.

使用 style 属性来添加边框:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

使用javascript绘制图像

第一步需要获取canvas，，并且设置画布的尺寸大小，将canvas转化为2d模型

   //获取canvas  对象
    var canvas = document.querySelector("#canvas");
    //设置画布的尺寸
    canvas.width = 900;
    canvas.height = 600;
    //先将canvas   转化为2d模型
    var context = canvas.getContext("2d");
    //使用各种api  进行绘制

    context.save();//存储之前的状态

设置填充色

context.fillStyle对样式进行填充，默认为黑色
context.fillRect(170, 50, 100, 100);矩形样式填充 ，分别为x坐标，y坐标，宽度和高度
context.fill();填充

描边

context.strokeStyle = "#cbcbcb";描边样式，默认为黑色
context.strokeRect(290, 50, 100, 100);矩形描边
context.stroke();描边

   context.fillStyle = "red";
    context.fillRect(170, 50, 100, 100);
    context.fill();


    context.strokeStyle = "#cbcbcb";
    context.strokeRect(290, 50, 100, 100);
    context.stroke();

绘制字体

context.font = "30px 幼圆";设置字体大小和字体样式
context.fillText("text", x, y, maxwidth); 对文字进行填充，也可以渐变和填充图案
context.strokeText("text", 630, 50, 200)文字描边，绘制空心的文本

     context.font = "30px 幼圆";
    context.fillText("Canvas", 410, 50, 200);
    

    context.restore();
    context.strokeStyle = "#000";
    context.font = "30px 幼圆";
    context.strokeText("Canvas", 630, 50, 200);

绘制圆弧

context.beginPath();开始路径
context.closePath();结束路径
context.arc(200, 270, 100, 0, Math.PI * 2, true);参数分别为 圆心横坐标，圆心纵坐标，半径、圆弧开始的角度，true为逆时针，false为顺时针

        context.restore();
        context.strokeStyle = "red";
        context.fillStyle = "yellow";
        //开始路径
        context.beginPath();
        context.arc(200, 270, 100, 0, Math.PI * 2, true);
        context.stroke();
        context.fill();
        context.closePath();


        context.restore();
        context.strokeStyle = "green";
        //开始路径
        context.beginPath();
        context.arc(200, 420, 100, 0, Math.PI / 2, false);
        context.stroke();
        context.closePath();

绘制线条

context.beginPath();开始路径
context.closePath();结束路径
context.moveTo(320, 370);路径绘制起始点，参数为起始点横坐标，纵坐标
context.arcTo(400, 450, 460, 370, 30);绘制圆弧，参数分别表示 第一个控制点的横坐标，纵坐标，第二个控制点的横坐标，纵坐标，圆弧的半径
context.lineTo(500, 370);路径绘制指定点 参数分别表示 点的横坐标，纵坐标
context.clip(); 创建裁剪路径

        context.restore();
        context.strokeStyle = "#000";
        context.beginPath();
        context.moveTo(320, 370);
        context.arcTo(400, 450, 460, 370, 30);
        context.arcTo(470, 350, 500, 370, 40);
        context.lineTo(500, 370);
        context.stroke();
        context.closePath();

        //清除区域
        //  context.clearRect(150, 220, 100, 100);
        //绘制椭圆
        context.beginPath();
        context.ellipse(600, 100, 30, 30, Math.PI / 4, 0, Math.PI * 2, false);
        context.stroke();
        context.closePath();

context.clearRect(0,0,900,600); 清空canvas

线性渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

createLinearGradient(x,y,x1,y1) - 创建线条梯度
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆梯度

createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

gradient.addColorStop(position, color) ddColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。

 var garent = context.createRadialGradient(150, 150, 0, 150, 150, 150);
        garent.addColorStop(0, "red");
        garent.addColorStop(0.2, "green");
        garent.addColorStop(0.4, "blue");
        garent.addColorStop(0.6, "orange");
        garent.addColorStop(0.8, "yellow");
        garent.addColorStop(1, "pink");
        context.fillStyle = garent;
        context.clearRect(0, 0, 900, 600);

        context.beginPath();
        context.fillRect(0, 0, 300, 300);
        context.closePath();

        context.restore();

        var txt = context.createLinearGradient(400, 20, 600, 20);
        txt.addColorStop(0, "red");
        txt.addColorStop(0.2, "green");
        txt.addColorStop(0.4, "blue");
        txt.addColorStop(0.6, "orange");
        txt.addColorStop(1, "yellow");
        context.fillStyle = txt;
        context.font = "40px 幼圆";
        context.fillText("Canvas  官网", 400, 50, 200);

图形变换
translate(x, y) 位移
translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量 ，对canvas整体坐标系进行位移
rotate(angle)旋转
给canvas画布添加旋转矩阵 ，顺时针方向，旋转的中心点始终是 canvas 的原点
scale(x, y) 缩放
scale 方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比1小，会比缩放图形， 如果比1大会放大图形。默认值为1， 为实际大小。
transform(a, b, c, d, e, f) 将当前的变形矩阵乘上一个基于自身参数的矩阵
a (m11)水平方向的缩放 b(m12)水平方向的倾斜偏移 c(m21)竖直方向的倾斜偏移 d(m22)竖直方向的缩放 e(dx)水平方向的移动 f(dy)竖直方向的移动

阴影
shadowBlur = float

shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。

shadowColor = color shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。2shadowOffsetY = float
shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

createPattern(image, type)该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

            context.transform(1, 0.9, 0.9, 1, 0, 0);
            context.shadowColor = "orange";
            context.shadowBlur = 10;
            context.shadowOffsetX = 10;
            context.shadowOffsetY = 2;
            var pattern = context.createPattern(this, "repeat-x");
            context.fillStyle = pattern;
            context.font = "40px 幼圆";
            context.fillText("canvas", 400, 200, 400);