一.渐变
渐变有两种方式,一种是线型渐变,一种是径向渐变。
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