从0开始学canvas--第二篇

前言

上一篇（ juejin.cn/post/730223... ）了解了canvas的创建方式以及如何使用canvas进行简单图形的绘制，但是画的线条太细且只有黑色，显得太过单调，本篇章主要了解如何对canvas绘制的线条及图形进行样式上的调整。

回顾

首先来回顾一下，canvas的创建方式：

   1、在body中创建<canvas></canvas>标签，在js中通过getElementById方法获取到canvas元素，然后使用canvas.getContext('2d')获取canvas画笔；
   2、通过js的createElement('canvas')方法创建一个canvas标签，使用document.body.appendChild(canvas)添加到body中，然后使用canvas.getContext('2d')获取canvas画笔

简单回顾后，我们开始今天的新篇章：如何设置canvas的样式

设置canvas的宽度

在css中，我们可以通过width属性去设置元素的宽度，在canvas中我们可以使用lineWidth来设置canvas绘制出的线条的宽度：

    const canvas = document.createElement('canvas')
    // 这两行代码是对canvas容器的宽高进行设置
    canvas.width = 600
    canvas.height = 600
    
    // 将canvas元素挂载到body上去
    document.body.appendChild(canvas)
    
    // 获取canvas画笔
    const ctx = canvas.getContext('2d')
    
    // 开始绘制一条宽度为10px的直线
    ctx.moveTo(100,100)
    ctx.lineTo(200,300)
    ctx.lineWidth = 10
    ctx.stroke()

执行以上代码，你可以得到如下图的结果：

设置线条的颜色

到这里我们就已经成功的绘制出来了一条宽度为10的直线，但是线条的颜色还是黑色，显得有点单调了，有没有什么办法可以修改线条的颜色呢？这个问题的答案是肯定的，在css中我们通过color来设置字体的颜色，通过background来设置元素的背景色，在canvas中，我们可以通过strokeStyle来设置元素的颜色，接下来一起对上面的代码进行修改，给这条直线添加一个颜色

const canvas = document.createElement('canvas')
    // 这两行代码是对canvas容器的宽高进行设置
    canvas.width = 600
    canvas.height = 600
    
    // 将canvas元素挂载到body上去
    document.body.appendChild(canvas)
    
    // 获取canvas画笔
    const ctx = canvas.getContext('2d')
    
    // 开始绘制一条宽度为10px的直线
    ctx.moveTo(100,100)
    ctx.lineTo(200,300)
    ctx.lineWidth = 10
    ctx.strokeStyle = 'red'
    ctx.stroke()

通过设置strokeStyle='red'改变直线的颜色,你可以得到如下图的一条直线

在canvas中，不仅仅可以设置单一的颜色，还可以像css那样，给元素设置渐变的背景色，下面我们就一起来看看，在canvas中是如何设置渐变色的

使用渐变设置颜色

到这里我们已经知道如何去设置canvas所绘制的直线的颜色，那么可能又会有疑问了，难道canvas绘制的直线就只能设置单一的颜色了吗？当然不是的，我们还可以对这条直线进行修改，让它变得五颜六色

线性渐变

在使用径向渐变之前，我们先来简单了解一下：

1. 通过CanvasRenderingContext2D.createLinearGradient()来获取到一个线性CanvasGradient对象，并将这个返回值赋值给fillRect或者strokeStyle
2. createLinearGradient(x0,y0,x1,y1) 方法需要指定四个参数，分别表示渐变线段的开始点 和结束点 。x0,x1分别表示x轴方向的起终点，y0，y1则表示y轴方向的起终点
3. 使用addColorStop(offset, color)，其中offset接受的值在0-1之间,超出这个取值返回将会抛出INDEX_SIZE_ERR错误；color表示一个可以被css解析的有效颜色值，若无法被解析，将抛出SYNTAX_ERR错误

简单了解完了线性渐变的前置知识点，接下来我们就开始绘制一条渐变的直线

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

      cav.width = 600;

      cav.height = 600;

      document.body.appendChild(cav);

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

      const gradient = ctx.createLinearGradient(0,0,600,400);

      gradient.addColorStop(0, 'red');

      gradient.addColorStop(0.5, 'hotpink');

      gradient.addColorStop(1, 'blue');

      ctx.moveTo(0, 0);

      ctx.lineTo(400,400);

      ctx.lineWidth = 15;

      // 把渐变颜色赋值 给线条

      ctx.strokeStyle = gradient;

      ctx.stroke()

执行上面的代码，你就可以看见一条这样的直线

使用径向渐变绘制矩形

在了解完如何使用线性渐变后，我们来看看在canvas中如何使用径向渐变去绘制一个元素，在此之前，让我们先来了解一下径向渐变的相关知识点

1. 使用CanvasRenderingContext2D.createRadialGradient(x0, y0, r0, x1, y1, r1) 方法获取到一个径向渐变返回值
2. x0,x1表示开始和结束圆形的x轴的坐标；y0,y1表示开始和结束圆形的y轴的坐标;r0,r1表示开始和结束圆形的半径;
3. 通过addColorStop()方法设置偏移量和颜色值

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

      cav.width = 300;

      cav.height = 300;

      document.body.appendChild(cav);

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

      const gradient = ctx.createRadialGradient(150,150,10,150,150,300);

      gradient.addColorStop(0, 'red');

      gradient.addColorStop(0.5, 'hotpink');

      gradient.addColorStop(1, 'yellow');

      ctx.fillStyle = gradient;

      ctx.fillRect(0,0,300,300);

执行上述代码，你会得到如下结果

一个由渐变色填充的矩形就绘制完成了，发挥你的想象，使用渐变去绘制一个漂亮的图形吧，下一篇将继续学习canvas相关的知识......

结语

canvas在html5中，占据着举足轻重的地位，能熟练使用canvas进行图形绘制、动效制作，在市场中的竞争力将会是一个很大的优势，下期再见 ^ __ ^