整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
性漸變和徑向漸變《HTML5系列教程19》
線性漸變和徑向漸變《HTML5系列教程19》
漸變在我們的日常生活中是一種隨處可見的非常普遍的一種視角形象。Canvas為實現(xiàn)漸變效果提供了很好的解決方案。在HTML5中主要有兩種漸變方式，一種是沿著直線的漸變方式，另一種是從一個點或圓的半徑向四周漸變的方式，我們把這兩種方式叫做線性漸變和徑向漸變。今天我們主要介紹這兩種漸變的繪制方法。
1.線性漸變的繪制方法
Canvas提供了用于創(chuàng)建線性漸變的函數(shù)createLinearGRadient（x0,y0,x1,y1）,坐標點是（x0,y0）指定了線性漸變的起點，坐標點（x1,y1）指定了線性漸變的終點，如果這兩個坐標點在一條水平線上，那么就會創(chuàng)建水平線性漸變；如果這兩個坐標點在一條垂直線上，那么將創(chuàng)建垂直線性漸變；如果這兩個坐標點連線是一條傾斜的直線，那么將創(chuàng)建傾斜線性漸變。那么假設(shè)現(xiàn)在我們要創(chuàng)建一個寬度為300的水平線性漸變，示例代碼如圖所示：
HTML5中寬度為300的水平線性漸變的繪制代碼
有了一個漸變對象之后，我們就需要定義漸變的顏色了。在Canvas中使用addColorStop（stop，color）函數(shù)來定義漸變的顏色，參數(shù)stop表示開始漸變位置占漸變區(qū)域的百分比，為0~1之間的任意值，參數(shù)color為顏色樣式。在實際應(yīng)用中，至少要添加兩種以上顏色才能達到漸變效果。例如要創(chuàng)建從紅色到藍色的漸變，可以使用圖中這個示例代碼：
HTML5中漸變顏色的定義
接下來我們需要設(shè)置Canvas內(nèi)容的fillStyle為當前的漸變對象，并且繪制圖形，比如一個矩形或一條直線。所以，為了看到漸變效果，我們還需要以下代碼：
HTML5中繪制漸變圖形
到這里，一個線性漸變的圖形就繪制完成了，完整的示例代碼如圖：
HTML5中繪制紅藍漸變的代碼示例
在谷歌瀏覽器上預(yù)覽效果如圖：
HTML5中繪制紅藍漸變的效果示例
2.徑向漸變的繪制
徑向漸變與線性漸變的實現(xiàn)方式基本類似，在Canvas中使用createRadialGradient(x0,y0,r0,x1,y1,r1)函數(shù)創(chuàng)建一個沿兩個圓之間的錐面繪制漸變。前三個參數(shù)代表圓心為(x0,y0)，半徑為r0的開始圓，后三個參數(shù)代表圓心為(x1,y1)，半徑為r1的結(jié)束圓。創(chuàng)建該對象后，仍需要使用addColorStop函數(shù)定義漸變顏色，并設(shè)置徑向漸變對象為fillStyle的當前漸變對象，最后繪制一個漸變圖形，完成徑向漸變的繪制。繪制徑向漸變的示例代碼如圖所示：
HTML5中徑向漸變的繪制代碼示例
在谷歌瀏覽器上預(yù)覽效果如圖：
HTML5中徑向漸變的繪制效果示例
還有一點要注意的是在繪制徑向漸變時，可能會因為Canvas的寬度或高度設(shè)置不合適，導致徑向漸變顯示不完整，這時候就要考慮跳轉(zhuǎn)Canvas的尺寸了，以便能完整顯示徑向漸變的效果。這一次線性漸變和徑向漸變就是這些了。謝謝大家的觀看。祝大家：身體健康、生活愉快！
用官方的話來講
Fabric.js 是一個強大而簡單的 Javascript HTML5 canvas 工具庫
簡單來說，如果你需要用 canvas 做特效或者做交互，那不妨試試 Fabric.js 這個庫，它會使開發(fā)更加簡單和直觀。
http://fabricjs.com/
本文案例中使用了 Fabric.js 4.6 這個版本。
使用了 Vite 構(gòu)建 Vue3 項目。
npm init @vitejs/app選擇 Vue3，之后再根據(jù)提示初始化項目即可。
npm install fabric --save漸變是 Fabric.js 的基礎(chǔ)功能，但網(wǎng)上大部分文章都只寫 線性漸變，很少有寫到徑向漸變的，因為官方好像也沒給出徑向漸變的例子。
甚至還見過有些文章和評論說 Fabric.js 只支持線性漸變。但這個說法是錯的！！！
請看這個案例：【Fabric.js 漸變效果】
沒錯，本文只想證明在 Fabric.js 4.6版本中是可以實現(xiàn)徑向漸變的。
<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:[ // 定義漸變顏色的數(shù)組
{ 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><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 這幾個參數(shù)可以自己修改值然后看看效果，自己親手改一下會理解得更深刻。
?http://k21vin.gitee.io/front-end-data-visualization/#/fabric/fabric-basic/fabric-gradient
享興趣，傳播快樂，增長見聞，留下美好！
親愛的您，這里是LearningYard學苑。
今天小編為大家?guī)?/span>
歡迎您的訪問。
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前端開發(fā)帶來了一定的困難，同時，用戶在進行音頻視頻播放的時候，必須要安裝瀏覽器插件才能播放音頻，這樣就不方便用戶的使用。
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元素專門用來播放網(wǎng)絡(luò)上的音頻數(shù)據(jù)，而video元素專門用來播放網(wǎng)絡(luò)上的視頻或電影。使用這兩個元素，就不需要使用其他的插件了，只要支持HTML5的瀏覽器即可。同時，在開發(fā)的時候，也不再需要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語義：
<!-- 瀏覽器能夠支持的編譯器不一致，為了確保一個音頻能夠同時被所有支持HTML5的瀏覽器支持，可以通過<source>元素來為同一個音頻指定多個源 -->
<audio src="" controls="controls"></audio>
<audio>
<source src="" type="audio/ogg">
<source src="" type="audio/mpeg">
<source src="" type="audio/mav">
您的瀏覽器不支持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 src="" controls="controls"></audio>
<audio>
<source src="" type="audio/ogg">
<source src="" type="audio/mpeg">
<source src="" type="audio/mav">
Your browser does not support audio
</audio>
Vedio語義：
<!-- 瀏覽器能夠支持的編譯器不一致，為了確保一個視頻能夠同時被所有支持HTML5的瀏覽器支持，可以通過<source>元素來為同一個視頻指定多個源 -->
<video src="./source/你頭頂?shù)娘L彈唱1.mp4" controls="controls"></video>
<video>
<source src="" type="audio/ogg">
<source src="" type="audio/mp4">
<source src="" type="audio/webm">
您的瀏覽器不支持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>
<source src="" type="audio/ogg">
<source src="" type="audio/mp4">
<source src="" type="audio/webm">
Your browser does not support audio
</video>
漸變：
CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。使用background-image屬性來設(shè)置漸變屬性
漸變的類型可分為兩種:
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角的方向
徑向漸變（Radial Gradients）- 由它們的中心定義
（注意:一個線性漸變，你必須至少定義兩種顏色節(jié)點)
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新學苑原創(chuàng)，如有侵權(quán)，請聯(lián)系刪除。
文案|李仕陽
排版|李仕陽
審核|李小雪
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
