Canvas基本入门操作

一、基本体验Canvas绘图

1. 基本操作

a. 准备画布

使用canvas标签

注意：

• 画布是白色的 而且默认300*150，所以我们可以在style样式里给canvas加上边框
• 设置画布的大小，需要使用内敛式设置，不建议在style样式进行设置

<style>
        canvas{
            border: 1px solid #ccc;
            /*不建议在 样式设置尺寸*/
            /*width: 600px;
            height: 400px;*/
        }
</style>
<canvas width="600" height="400" ></canvas>

解释：

• 如果在style里设置样式会导致画布变大，是百分比的放大，包括画布上的任何操作也会随之变大，所以需要在标签内注明画布的大小。

b . 准备工具

这里的ctx就是指的工具箱

    /*1.获取元素*/
    var myCanvas = document.querySelector('canvas');
    /*2.获取上下文 绘制工具箱 */
    var ctx = myCanvas.getContext('2d');

c. 利用工具绘画

/*3.移动画笔*/
    ctx.moveTo(100,100);
    /*4.绘制直线 (轨迹，绘制路径)*/
    ctx.lineTo(200,100);
    /*5.描边*/
    ctx.stroke();

如下图所示，可以看出在画布上出现了一条直线

关于线条的一些小问题：

• 线条的默认宽度为 1px 颜色为黑色
• 我们默认将画布边框的宽度设为1px，但是从上图可以看出，线条的宽度为2px，且颜色不是黑色
  • 原因是线条的出现在刻度的中间，就是在1px的中间，上下各占0.5px，但是当屏幕显示的时候会增加宽度，使其变模糊，所以直线就变得不饱和，
  • 解决方案：可以将直线的高度移动0.5px

如下所示：

ctx.moveTo(100,100.5);
ctx.lineTo(200,100.5);

可以明显的看到直线变细了，而且黑色也更加明显了

2. 绘制三条颜色和宽度不同的平行线

在进行绘制的时候，我们会发现，我们使用描边函数时，会将前面对平行线设置的颜色进行覆盖，所以，这时需要用到beginPath() 这个函数，用来开启新路径，解决样式覆盖问题。

 	var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*画平行线*/
    ctx.beginPath();/*Kai*/
    /*蓝色  10px*/
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 10;
    /*描边*/
    ctx.stroke();


    /*红色 20px*/
    ctx.beginPath();
    ctx.moveTo(100,200);
    ctx.lineTo(300,200);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 20;
    /*描边*/
    ctx.stroke();


    /*绿色 30px*/
    ctx.beginPath();
    ctx.moveTo(100,300);
    ctx.lineTo(300,300);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 30;
    /*描边*/
    ctx.stroke();

结果如图所示：

3. 绘制填充的三角形

a. 第一种方法

我们可以使用线的坐标进行连接

	var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);
    ctx.lineTo(100,100);
    ctx.lineWidth = 1;
    ctx.stroke();

但是如果我们将线的宽度扩大时，就会发现，三角形的起始点和结束点无法完全闭合缺角
我们将ctx.lineWidth 改为10，就会出现如下图所出现的情况

b. 使用ctx.closePath()

我们可以使用ctx.closePath()来关闭路径，使结束点和起始点进行闭合
注意：
这里的ctx.closePath()和ctx.beginPath() 没有关系

	ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);
    ctx.closePath();
    ctx.lineWidth = 10;
    ctx.stroke();

结果如图所示：

c. 填充

ctx.fill();

注意：

• ctx.fill(); 默认填充的是黑色
• 如果要使用有颜色的填充，如下进行设置

ctx.fillStyle = 'red';
ctx.fill();

4. 非零形环绕填充规则

举个例子，如果我们要绘制一个镂空的正方形，就是画两个正方形，然后进行填充即可
但是画正方形时，需要注意，如果外面的正方形是按照顺时针进行首位相连的，则内部的正方形需要按逆时针进行首位相连，这就是非零形环绕填充规则，如下图所示

解释：
我们设逆时针边与箭头相交为1，顺时针为-1

• 先看1所在的区域，一直为逆时针，所以为1大于0，所以填充
• 2所在的区域，都为逆时针，为2大于0，所以填充
• 3所在的区域，有逆时针也有顺时针，所以不填充

	var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制两个正方形 一大200一小100 套在一起*/
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    ctx.lineTo(100,300);
    ctx.closePath();

    ctx.moveTo(150,150);
    ctx.lineTo(150,250);
    ctx.lineTo(250,250);
    ctx.lineTo(250,150);
    ctx.closePath();

    /*填充*/
    ctx.fillStyle = 'red';
    ctx.fill();

结果如图所示：

二、线和虚线

1. 线的样式

• ctx.strokeStyle 对线条设置颜色
• ctx.lineCap 线末端的样式
  • butt 默认
  • round 圆形
  • squre 方形
• ctx.lineJoin 相交线的拐点样式
  • miter 默认样式
  • round 圆形
  • bevel 斜状拐点
    如下图所示：

ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(200,20);
    ctx.lineTo(300,100);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 10;
    ctx.lineCap = 'butt';
    ctx.lineJoin = 'miter';
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(100,200);
    ctx.lineTo(200,120);
    ctx.lineTo(300,200);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 20;
    ctx.lineCap = 'square';
    ctx.lineJoin = 'bevel';
    ctx.stroke();


    ctx.beginPath();
    ctx.moveTo(100,300);
    ctx.lineTo(200,220);
    ctx.lineTo(300,300);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 30;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.stroke();

2. 虚线

a. 设置虚线

• ctx.setLineDash(); 括号里需要传数组，数组用来描述虚线的排列方式

当传入一个值时

例：

ctx.setLineDash([20]);

可以看见虚线和空白之间都是相隔20px

---

当传入一个数组时：

ctx.setLineDash([5,10]);

可以看见虚线和空白的排列方式为5 10 循环

---

当传入的数组为三位数时：

ctx.setLineDash([5,10,30]);

可以看见虚线和空白按照5,10,30,5,10,30的顺序依次循环

b . 获取虚线的宽度集合

ctx.getLineDash()

    ctx.setLineDash([5,10,30]);
    console.log(ctx.getLineDash());

注意：
获取虚线的排列方式 获取的是不重复的那一段的排列方式

c . 设置虚线偏移量

ctx.lineDashOffset

• 如果给的数为正数，向左偏移
• 负数向右偏移

三、渐变矩形绘制

1. 绘制矩形

• rect(x, y, w, h ); 没有独立路径
• strokeRect(x, y, w, h ) ； 有自己独立的路径（描边路径）
• fillRect(x, y, w, h ) ； 有自己独立的路径 （填充矩形）；画出一个有填充颜色的矩形框（默认是黑色的）
• ctx.clearRect(x, y, w, h ) ；擦除矩形区域

strokeRect和rect的区别

• rect
  在进行绘制矩形的时候需要调用stroke() 进行描边处理或 fill()填充后才会真正作用于画布

ctx.rect(100,100,200,100);
ctx.stroke();

• strokeRect
  直接绘制出一个矩形

ctx.strokeRect(100,100,200,100);

擦除矩形示例：

<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    ctx.rect(100.5,100.5,200,100);
    ctx.fillStyle = 'green';
    ctx.stroke();
    ctx.fill();
    //ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);  //擦除整个画布
    ctx.clearRect(100,100,50,50);
</script>

2. 对线进行填充

线是由点构成的

	ctx.lineWidth = 30;
    for (var i = 0; i < 255; i++) {
        ctx.beginPath();
        ctx.moveTo(100+i-1,100);
        ctx.lineTo(100+i,100);
        ctx.strokeStyle = 'rgb('+i+',0,0)';
        ctx.stroke();
    }

结果如图所示：

2. 通过方案设置渐变

• createLinearGradient() 方法创建线性的渐变对象。
  语法：

context.createLinearGradient(x0,y0,x1,y1);

参数	描述
x0	渐变开始点的x坐标
y0	渐变开始点的y坐标
x1	渐变结束点的x坐标
y1	渐变结束点的y坐标

<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    var linearGradient = ctx.createLinearGradient(100,100,400,100);
    linearGradient.addColorStop(0,'pink');
    linearGradient.addColorStop(1,'blue');

    ctx.fillStyle = linearGradient;

    ctx.fillRect(100,100,400,100);
</script>

上边代码设置的是从左到右依次渐变，如图

如果将x1的值改变，则会出现倾斜渐变

var linearGradient = ctx.createLinearGradient(100,100,500,400);

结果如图