线性渐变和径向渐变《HTML5系列教程19》

性渐变和径向渐变《HTML5系列教程19》

渐变在我们的日常生活中是一种随处可见的非常普遍的一种视角形象。Canvas为实现渐变效果提供了很好的解决方案。在HTML5中主要有两种渐变方式，一种是沿着直线的渐变方式，另一种是从一个点或圆的半径向四周渐变的方式，我们把这两种方式叫做线性渐变和径向渐变。今天我们主要介绍这两种渐变的绘制方法。

1.线性渐变的绘制方法

Canvas提供了用于创建线性渐变的函数createLinearGRadient（x0,y0,x1,y1）,坐标点是（x0,y0）指定了线性渐变的起点，坐标点（x1,y1）指定了线性渐变的终点，如果这两个坐标点在一条水平线上，那么就会创建水平线性渐变；如果这两个坐标点在一条垂直线上，那么将创建垂直线性渐变；如果这两个坐标点连线是一条倾斜的直线，那么将创建倾斜线性渐变。那么假设现在我们要创建一个宽度为300的水平线性渐变，示例代码如图所示：

HTML5中宽度为300的水平线性渐变的绘制代码

有了一个渐变对象之后，我们就需要定义渐变的颜色了。在Canvas中使用addColorStop（stop，color）函数来定义渐变的颜色，参数stop表示开始渐变位置占渐变区域的百分比，为0~1之间的任意值，参数color为颜色样式。在实际应用中，至少要添加两种以上颜色才能达到渐变效果。例如要创建从红色到蓝色的渐变，可以使用图中这个示例代码：

HTML5中渐变颜色的定义

接下来我们需要设置Canvas内容的fillStyle为当前的渐变对象，并且绘制图形，比如一个矩形或一条直线。所以，为了看到渐变效果，我们还需要以下代码：

HTML5中绘制渐变图形

到这里，一个线性渐变的图形就绘制完成了，完整的示例代码如图：

HTML5中绘制红蓝渐变的代码示例

在谷歌浏览器上预览效果如图：

HTML5中绘制红蓝渐变的效果示例

2.径向渐变的绘制

径向渐变与线性渐变的实现方式基本类似，在Canvas中使用createRadialGradient(x0,y0,r0,x1,y1,r1)函数创建一个沿两个圆之间的锥面绘制渐变。前三个参数代表圆心为(x0,y0)，半径为r0的开始圆，后三个参数代表圆心为(x1,y1)，半径为r1的结束圆。创建该对象后，仍需要使用addColorStop函数定义渐变颜色，并设置径向渐变对象为fillStyle的当前渐变对象，最后绘制一个渐变图形，完成径向渐变的绘制。绘制径向渐变的示例代码如图所示：

HTML5中径向渐变的绘制代码示例

在谷歌浏览器上预览效果如图：

HTML5中径向渐变的绘制效果示例

还有一点要注意的是在绘制径向渐变时，可能会因为Canvas的宽度或高度设置不合适，导致径向渐变显示不完整，这时候就要考虑跳转Canvas的尺寸了，以便能完整显示径向渐变的效果。这一次线性渐变和径向渐变就是这些了。谢谢大家的观看。祝大家：身体健康、生活愉快！

abric.js 简介

用官方的话来讲

Fabric.js 是一个强大而简单的 Javascript HTML5 canvas 工具库

简单来说，如果你需要用 canvas 做特效或者做交互，那不妨试试 Fabric.js 这个库，它会使开发更加简单和直观。

http://fabricjs.com/

本文使用的开发环境

本文案例中使用了 Fabric.js 4.6 这个版本。

使用了 Vite 构建 Vue3 项目。

搭建项目

npm init @vitejs/app

选择 Vue3，之后再根据提示初始化项目即可。

安装 Fabric.js

npm install fabric --save

为什么本文只写渐变？

渐变是 Fabric.js 的基础功能，但网上大部分文章都只写 线性渐变，很少有写到径向渐变的，因为官方好像也没给出径向渐变的例子。

甚至还见过有些文章和评论说 Fabric.js 只支持线性渐变。但这个说法是错的！！！

请看这个案例：【Fabric.js 渐变效果】

没错，本文只想证明在 Fabric.js 4.6版本中是可以实现径向渐变的。

线性渐变 linear

<template>
  <canvas width="600" height="600" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>

<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'

function init() {
  let canvas = new fabric.Canvas('canvas') // 实例化fabric，并绑定到canvas元素上

  // 圆
  let circle = new fabric.Circle({
    left: 100,
    top: 100,
    radius: 50,
  })

  // 线性渐变
  let gradient = new fabric.Gradient({
    type: 'linear', // linear or radial
    gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
    coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, // 至少2个坐标对（x1，y1和x2，y2）将定义渐变在对象上的扩展方式
    colorStops:[ // 定义渐变颜色的数组
      { offset: 0, color: 'red' },
      { offset: 0.2, color: 'orange' },
      { offset: 0.4, color: 'yellow' },
      { offset: 0.6, color: 'green' },
      { offset: 0.8, color: 'blue' },
      { offset: 1, color: 'purple' },
    ]
  })
  circle.set('fill', gradient);
  canvas.add(circle)
}

onMounted(() => {
  init()
})
</script>

径向渐变 radial

<template>
  <canvas width="600" height="600" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>

<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'

function init() {
  let canvas = new fabric.Canvas('canvas')  // 实例化fabric，并绑定到canvas元素上

  // 圆
  let circle = new fabric.Circle({
    left: 100,
    top: 100,
    radius: 50,
  })

  let gradient = new fabric.Gradient({
    type: 'radial',
    coords: {
      r1: 50, // 该属性仅径向渐变可用，外圆半径
      r2: 0, // 该属性仅径向渐变可用，外圆半径  
      x1: 50, // 焦点的x坐标
      y1: 50, // 焦点的y坐标
      x2: 50, // 中心点的x坐标
      y2: 50, // 中心点的y坐标
    },
    colorStops: [
      { offset: 0, color: '#fee140' },
      { offset: 1, color: '#fa709a' }
    ]
  })

  circle.set('fill', gradient);
  canvas.add(circle)
}

onMounted(() => {
  init()
})
</script>

r1、r2、x1、y1、x2、y2 这几个参数可以自己修改值然后看看效果，自己亲手改一下会理解得更深刻。

‍http://k21vin.gitee.io/front-end-data-visualization/#/fabric/fabric-basic/fabric-gradient

享兴趣，传播快乐，增长见闻，留下美好！

亲爱的您，这里是LearningYard学苑。

今天小编为大家带来

欢迎您的访问。

Share interests, spread happiness, increase knowledge, and leave a good legacy!

Dear you, this is The LearningYard Academy.

Today Xiaobian brings it to you

Saturday shared the dominant ideas and theoretical characteristics of the | school of management science

Welcome to your visit.

在HTML5之前，要在页面嵌入音频视频，只能使用<object>和<embed>元素，这种嵌入方式不仅给Web前端开发带来了一定的困难，同时，用户在进行音频视频播放的时候，必须要安装浏览器插件才能播放音频，这样就不方便用户的使用。

Before HTML5, only < object > and < embed > elements could be used to embed audio and video on a page. This embedding method not only brings some difficulties to the development of Web front-end, but also makes it inconvenient for users to install browser plug-ins to play audio when playing audio and video.

所以在HTML5中，新增了两个元素：audio元素和video元素，其中audio元素专门用来播放网络上的音频数据，而video元素专门用来播放网络上的视频或电影。使用这两个元素，就不需要使用其他的插件了，只要支持HTML5的浏览器即可。同时，在开发的时候，也不再需要object元素和embed元素编写复杂的代码了

Therefore, in HTML5, two new elements are added: audio element and video element, in which audio element is dedicated to playing audio data on the network, while video element is dedicated to playing videos or movies on the network. With these two elements, you don't need to use other plug-ins, just a browser that supports HTML5. At the same time, during the development, it is no longer necessary to write complex code with object element and embed element.

Audio语义：

<audio>

您的浏览器不支持audio

</audio>

Audio semantics:

<! -The compilers that browsers can support are inconsistent. To ensure that an audio can be supported by all browsers that support HTML5 at the same time, you can specify multiple sources for the same audio through the < source > element->

<audio>

Your browser does not support audio

</audio>

Vedio语义：

<video>

您的浏览器不支持audio

</video>

Vedio semantics:

<! -The compilers that browsers can support are inconsistent. To ensure that a video can be supported by all browsers that support HTML5 at the same time, you can specify multiple sources for the same video through the < source > element->

< video src="./source/ The wind above you plays and sings 1.mp4 "controls =" controls "> </video >

<video>

Your browser does not support audio

</video>

渐变：

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。使用background-image属性来设置渐变属性

渐变的类型可分为两种:

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角的方向

径向渐变（Radial Gradients）- 由它们的中心定义

（注意:一个线性渐变，你必须至少定义两种颜色节点)

Gradient:

CSS3 gradients allow you to show a smooth transition between two or more specified colors. Use the background-image property to set the gradient property.

There are two types of gradients:

Linear Gradients)- Down/Up/Left/Right/Diagonal direction

Radial gradients—defined by their centers.

(Note: for a linear gradient, you must define at least two color nodes)今天的分享就到这里了。

如果您对今天的文章有独特的想法，

欢迎给我们留言，

让我们相约明天，

祝您今天过得开心快乐！

That's it for today's sharing.

If you have a unique idea about today’s article,

Welcome to leave us a message,

Let us meet tomorrow

,I wish you a happy day today!

英文翻译：Google翻译

参考来源：百度、知乎

本文由LearningYard新学苑原创，如有侵权，请联系删除。

文案|李仕阳

排版|李仕阳

审核|李小雪

在线咨询

上一篇：layui下拉菜单form.render局部刷新方法亲测有效
下一篇：DebugView调试C井程序学习总结

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

线性渐变和径向渐变《HTML5系列教程19》

abric.js 简介

本文使用的开发环境

搭建项目

安装 Fabric.js

为什么本文只写渐变？

线性渐变 linear

径向渐变 radial

您的项目需求