从0开始学canvas--第三篇

前言

在前面两篇文章中，已经了解了如何使用canvas去绘制简单的图形，以及如何设置所绘制图形的背景色，在今天的文章中，我们将学习以下几个点：

• 如何使用锥形渐变
• 如何使用重复元素
• 如何绘制一条渐变的折线

如何使用锥形渐变

在学习如何使用锥形渐变之前，先来简单回顾一下线性渐变和径向渐变是如何使用的。

线性渐变

1. 通过createLinearGradient(x0,y0,x1,y1)得到一个线性渐变的对象
2. 通过addColorStop(offset,color)设置对应区域的颜色
3. 通过strokeStyle将预设的数据设置到要绘制的线条上
4. 最后调用stroke方法完成绘制

径向渐变

1. 通过createRadialGradient(x0,y0,r0,x1,y1,r1)得到一个径向渐变对象
2. 通过addColorStop(offset,color)设置对应区域的颜色
3. 通过fillStyle将预设的数据设置到要绘制的元素上
4. 调用fillRect(x,y,width,height)方法完成绘制

简单回顾完后，我们开始学习如何使用锥形渐变

锥形渐变(目前处于试验阶段，部分浏览器不兼容，可使用Edge查看效果)

代码如下：

const cav = document.createElement('canvas');

    cav.width = 400;

    cav.height = 400;

    document.body.appendChild(cav);

    const ctx = cav.getContext('2d');

    // 第一个参数是表示弧度，若是要使用角度，需要进行转换
    // 第二三个参数分别表示x轴和y轴的起点
    // 该方法目前还是试验性阶段，部分浏览器不兼容，建议使用edge浏览器查看结果

    const gradient = ctx.createConicGradient(45 * (Math.PI / 180),200,200);

    gradient.addColorStop(0,'skyblue');

    gradient.addColorStop(1,'pink');

    ctx.fillStyle = gradient;

    ctx.fillRect(0,0,cav.width,cav.height);

执行上面代码，可以看到如下效果：

使用重复对象--patttern

在canvas中，使用重复对象类似于css中的背景图片，同样支持 repeat|repeat-x|repeat-y|no-repeat 先看代码，如何实现这个效果

    const cav = document.createElement('canvas');

    cav.width = 400;

    cav.height = 400;

    document.body.appendChild(cav);

    const ctx = cav.getContext('2d');

      let image = new Image();

      image.src='图片地址';

      image.onload = () => {

        const p = ctx.createPattern(image,'repeat');

        ctx.fillStyle = p;

        ctx.fillRect(0,0,cav.width,cav.height);

      }

执行代码得到的效果如下：

使用createPattern(重复元图像，如何重复图像)可以得到一个描述模式的不透明对象，MDN地址：Pattern

使用重复元图像就简单了解到这

绘制渐变折线

在前面的文章里面，我们已经绘制了一条折线，现在可以把之前绘制折线的代码拿过来进行修改

const cav = document.createElement('canvas');

      cav.width = 600;

      cav.height = 400;

      document.body.appendChild(cav);

      const ctx = cav.getContext('2d');
          // 创建线性渐变对象
      const g = ctx.createLinearGradient(100, 100,500,100);

        // 设置渐变区域及颜色
      g.addColorStop(0, 'skyblue');

      g.addColorStop(0.25, 'pink');

      g.addColorStop(0.5, 'yellowgreen');

      g.addColorStop(1, 'red');
      
        // 使用渐变预设
      ctx.strokeStyle = g;

      // 修改折线起终点的样式

      ctx.lineCap = 'round'

      // 修改折线连接点的样式

      ctx.lineJoin = 'round'

      ctx.moveTo(50, 50);

      ctx.lineTo(150, 200);

      ctx.lineTo(250, 100);

      ctx.lineTo(300, 200);

      ctx.lineTo(450, 80);

      ctx.lineWidth = 10;

      ctx.stroke();

这次绘制折线，使用了lineCap和lineJoin属性对折线的样式进行修改，设置为round时，折线的起终点及连接点将呈现的如德芙般丝滑~

以上就是所有本次关于canvas的分享的内容，下期将继续更新关于canvas的使用技术