<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#canvas1{
margin: 0 auto;
/*background: #efefef;*/
display: block;
border: 1px solid #aaa;
/*width: 600px;
height: 400px;*/
}
</style>
</head>
<body>
<canvas id="canvas1" width="600" height="400">
你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//找到要设置的画布
var canvas1 = document.querySelector('#canvas1')
//能够对这个画布画画的对象,就是画笔，canvas1的上下文对象
var ctx = canvas1.getContext('2d')
ctx.rect(100,100,200,100)
// ctx.fillStyle = 'skyblue'
// ctx.fill()
//设置渐变色彩，首先要创建线性、径向渐变
//createLinearGradient(x1(起始点的水平坐标)，y1（起始点的垂直坐标），x2(终点的水平坐标)，y2(终点的垂直坐标))
var tt = ctx.createLinearGradient(100,100,300,200)
//addColorStop(位置（0-1），关键点的颜色)
tt.addColorStop(0,'skyblue')
tt.addColorStop(0.5,'purple')
tt.addColorStop(1,'pink')
ctx.fillStyle = tt
ctx.fill()
</script>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/u/4342638/blog/3607910