这篇canvas教程详细介绍了两种渐变方式：线型渐变和径向渐变。线型渐变通过设置起始点和结束点创建，而径向渐变则涉及起始圆和结束圆的坐标及半径。文章提供了源码示例和实际效果展示，帮助读者深入理解canvas中的渐变应用。
一.渐变
渐变有两种方式，一种是线型渐变，一种是径向渐变。
1.线型渐变
var linear = ctx.createLinearGradient(x1,y1,x2,y2);
这4个参数分别表示渐变线段的起始点(x1,y1)和结束点(x2,y2)。
addColorStop方法有2个参数：
linear.addColorStop(0.5,"grey");
第一个参数：当前渐变的位置（0-1之间的小数）。
第二个参数：颜色。
2.径向渐变
var linear = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
(x1,y1)：圆形的起始点。
r1:开始圆的半径。
r2：结束圆的半径。
(x2,y2)：圆形的结束点。
径向渐变的学习网址：
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/createRadialGradient
二.源码
1.线型渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
<style>
canvas
最低0.47元/天 解锁文章
932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
