效果展示：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变矩形</title>
<style>
canvas {
border: 1px dashed red;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
//获取canvas元素
var myCanvas = document.querySelector('canvas');
//获取上下文
var ctx = myCanvas.getContext('2d');
//利用渐变来填充矩形
var linear = ctx.createLinearGradient(100,100,500,100);
//添加颜色段
linear.addColorStop(0,'pink');
linear.addColorStop(1,'blue');
//改变描边的样式为渐变色
ctx.strokeStyle = linear;
//画一个100,100为起点，宽高400,100的描边矩形
ctx.strokeRect(100,100,400,100);
//改变填充的样式并绘画填充矩形
ctx.fillStyle = linear;
ctx.fillRect(100,100,400,100);
</script>
</body>
</html>
版权声明：本文为qq_43537987原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。