<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
</script>
<script type="text/javascript">
var grad = context.createLinearGradient(0,0,800,500);
//添加渐变的开始结束颜色,可以取值为0-1
grad.addColorStop(0,"red");
grad.addColorStop(0.5,"green");
grad.addColorStop(1,"blue");
// context.createLinearGradient(x0,y0,x1,y1);
// x0 渐变开始点的 x 坐标
// y0 渐变开始点的 y 坐标
// x1 渐变结束点的 x 坐标
// y1 渐变结束点的 y 坐标
// 颜色赋值
context.fillStyle = grad;
context.fillRect(0,0,800,500)
</script>
</body>
</html>
线性渐变
最新推荐文章于 2023-12-17 11:01:56 发布