<!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; /* 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>