<!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>线性渐变
最新推荐文章于 2021-06-02 13:46:15 发布
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
