<!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>Document</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
let canvas = document.querySelector("#canvas");
let context = canvas.getContext("2d");
// 创建线性渐变(x1,y1,x2,y2)
let gradient = context.createLinearGradient(0, 0, 600, 400);
// 起点渐变为红色
gradient.addColorStop(0, "red");
// 终点渐变为蓝色
gradient.addColorStop(1, "blue");
context.moveTo(0, 0);
context.lineTo(300, 300);
context.lineWidth = 10;
// 渐变作为线条样式
context.strokeStyle = gradient;
context.stroke();
</script>
</body>
</html>
线性渐变
在中间添加渐变
<!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>Document</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
let canvas = document.querySelector("#canvas");
let context = canvas.getContext("2d");
// 创建圆形渐变(圆心x1,圆心y1,半径r1,圆心x2,圆心y2,半径r2)
let gradient = context.createRadialGradient(200, 200, 0, 200, 200, 200);
// 设置起点颜色
gradient.addColorStop(0, "red");
// 设置终点颜色
gradient.addColorStop(1, "green");
// 给方形填充渐变色
context.fillStyle = gradient;
context.fillRect(0, 0, 400, 400);
</script>
</body>
</html>
圆形渐变(径向渐变)
<!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>Document</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
let canvas = document.querySelector("#canvas");
let context = canvas.getContext("2d");
let gradient = context.createConicGradient(0, 200, 200);
// 设置起点颜色
gradient.addColorStop(0, "red");
// 设置终点颜色
gradient.addColorStop(1, "green");
// 给方形填充渐变色
context.fillStyle = gradient;
context.fillRect(0, 0, 400, 400);
</script>
</body>
</html>
锥形渐变
<!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>Document</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
let canvas = document.querySelector("#canvas");
let context = canvas.getContext("2d");
let image = new Image();
image.src = "./img/bj.jpg";
image.onload = () => {
let p = context.createPattern(image, "repeat");
context.fillStyle = p;
context.fillRect(0, 0, 100, 100);
};
</script>
</body>
</html>
绘制元重复图像
