Contents

1. 一、基本体验Canvas绘图
1. 1.0.1. 1. 基本操作
1.0.2. 2. 绘制三条颜色和宽度不同的平行线
1.0.3. 3. 绘制填充的三角形

1.0.4. 4. 非零形环绕填充规则

2. 二、线和虚线

2.0.1. 1. 线的样式
2.0.2. 2. 虚线

3. 三、渐变矩形绘制

3.0.1. 1. 绘制矩形
1. 3.0.1.0.1. strokeRect和rect的区别

3.0.2. 2. 对线进行填充

3.0.3. 2. 通过方案设置渐变

一、基本体验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

如下所示：

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

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

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(); 默认填充的是黑色
如果要使用有颜色的填充，如下进行设置
1
2
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(); 括号里需要传数组，数组用来描述虚线的排列方式
当传入一个值时
例：
1
ctx.setLineDash([20]);

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

当传入一个数组时：

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

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

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

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

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

b . 获取虚线的宽度集合

ctx.getLineDash()

1 2	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()填充后才会真正作用于画布
1
2
ctx.rect(100,100,200,100);
ctx.stroke();
strokeRect
直接绘制出一个矩形
1
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>

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

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

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

结果如图
渐变2

Welkin

Canvas基本入门操作