html中绘制径向渐变

来源：互联网发布：和晟实业投资知乎编辑：程序博客网时间：2024/05/16 09:33

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>渐变绘制</title><script>function draw(id){var context=document.getElementById('canvas').getContext('2d');var radgrad=context.createRadialGradient(45,45,10,52,50,30);radgrad.addColorStop(0,'#a7d30c');radgrad.addColorStop(0.9,'#019f62');radgrad.addColorStop(1,'rgba(1,159,98,0)');var radgrad2=context.createRadialGradient(105,105,20,112,120,50);radgrad2.addColorStop(0,'#ff5f98');radgrad2.addColorStop(0.75,'#ff0188');radgrad2.addColorStop(1,'rgba(255,1,136,0)');var radgrad3=context.createRadialGradient(95,15,15,102,20,40);radgrad3.addColorStop(0,'#00c9ff');radgrad3.addColorStop(0.8,'#00b5e2');radgrad3.addColorStop(1,'rgba(0,201,255,0');var radgrad4=context.createRadialGradient(0,150,50,0,140,90);radgrad4.addColorStop(0,'#f4f201');radgrad4.addColorStop(0.8,'#e4c700');radgrad4.addColorStop(1,'rgba(228,199,0,0');context.fillStyle=radgrad4;context.fillRect(0,0,150,150);context.fillStyle=radgrad43context.fillRect(0,0,150,150);context.fillStyle=radgrad2;context.fillRect(0,0,150,150);context.fillStyle=radgrad;context.fillRect(0,0,150,150);}</script></head><body onload="draw('canvas');"><canvas id="canvas" width="400" height="300"/></body></html>

阅读全文

0 0