<!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="600"> 你的浏览器不支持canvas </canvas> <script type="text/javascript"> //找到要设置的画布 var canvas1 = document.querySelector(‘#canvas1‘) //能够对这个画布画画的对象,就是画笔，canvas1的上下文对象 var ctx = canvas1.getContext(‘2d‘) ctx.rect(100,100,400,400) //径向渐变的设置 var tt = ctx.createRadialGradient(300,300,30,250,250,120) tt.addColorStop(0,‘skyblue‘) tt.addColorStop(1,‘pink‘) ctx.fillStyle = tt ctx.fill() </script> </body> </html>
原文：https://www.cnblogs.com/wwthuanyu/p/10555365.html