从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查看效果)

代码如下:

js 复制代码
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 先看代码,如何实现这个效果

js 复制代码
    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

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

绘制渐变折线

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

js 复制代码
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();

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

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

相关推荐
不想有bug的小菜鸟6 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238637 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559608 分钟前
前端代理,解决跨域问题讲解
前端
quitv13 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238121 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星23 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-43 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3