回到首页
个人中心
反馈问题
注册登录
下载APP
代码
提交代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> <style> #imooc{ border:1px solid #ccc; } </style> </head> <body> <canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas> <script> const canvas = document.getElementById('imooc'); const ctx = canvas.getContext('2d'); ctx.rect(0, 0, 150, 150) let rg = ctx.createRadialGradient(75,75,0,75,75,70) // 1. 创建径向渐变线 rg.addColorStop(0, "#f00") // 2. 设定关键点 rg.addColorStop(0.5, "#fff") // 2. 设定关键点 rg.addColorStop(1, "#000") // 2. 设定关键点 ctx.fillStyle = rg; // 3. 填充径向渐变 ctx.fill(); </script> </body>
运行结果