本文摘自PHP中文网,作者不言,侵删。
在我们打开某个网页的时候,可能会看到有的页面中有颜色的渐变,感觉很好看,那么,这种渐变色是如何实现的呢?所谓渐变色其实就是颜色之间的过渡,而html5 Canvas渐变是一种用于填充或描边图形的颜色模式,所以,利用canvas如何实现颜色的渐变?本篇文章就来给大家介绍一下canvas渐变色的实现。我们要知道canvas提供了两个对象来创建渐变,渐变可以填充在矩形、文本、线条等。
canvas渐变可以分为线性渐变和径向渐变:
canvas创建线性渐变的函数是createLinearGradient(x,y,x1,y1)
canvas创建径向渐变的函数是createRadialGradient(x,y,r,x1,y1,r1)
下面我们就来分别看看canvas的线性渐变和径向渐变如何实现颜色的渐变。
首先来看一下canvas线性渐变:
线性渐变是以线性的模式来改变颜色,也就是水平,垂直或对角方向。
我们直接来看canvas线性渐变的例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
canvas线性渐变效果如下:
相关阅读 >>
介绍html5+canvas调用手机拍照功能实现图片上传(上篇)
html5 canvas渐进填充与透明实现图像的mask效果
更多相关阅读请进入《canvas》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者