<!doctype html> <html> <head> <meta charset="utf-8"> <title>渐变的矩形</title> <script> window.onload = function(){ var c = document.getElementById('c'); var ctx = c.getContext('2d'); //创建线型渐变对象 var jb = ctx.createLinearGradient(0,0,200,0); jb.addColorStop(0,'red'); jb.addColorStop(.25,'green'); jb.addColorStop(.5,'orange'); jb.addColorStop(1,'blue'); ctx.fillStyle = jb; ctx.fillRect(0,0,200,100); //x起点, y起点, x终点， y终点 } </script> </head> <body> <canvas id="c" width="400" height="400" ></canvas> </body> </html>