从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的使用技术

相关推荐
二十雨辰几秒前
歌词滚动效果
前端·css
法医2 分钟前
和文心快码做朋友,让编程像“说话”一样简单
前端·文心快码
前端小巷子5 分钟前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
陈随易6 分钟前
适合中国宝宝的AI编程神器,文心快码
前端·后端·node.js
知识分享小能手10 分钟前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
UrbanJazzerati22 分钟前
掌握 DOM 的基础属性与方法:从操作元素到构建动态效果
前端·面试
hashiqimiya1 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
古夕1 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
纯真时光1 小时前
Vue3中pinia状态管理库的使用(Composition API 风格)
前端
万少1 小时前
可可图片编辑 HarmonyOS(5)滤镜效果
前端