渐变圆形及矩形

xiaoxiao2025-06-18 6

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myc" width="1000px" height="700px" style="background-color:#e4dbff" ></canvas> <script> var can = document.getElementById("myc"); var c = can.getContext("2d"); c.moveTo(10,502); c.lineTo(900,502); c.stroke(); //圆 var grd=c.createLinearGradient(310,205,220,210); grd.addColorStop(0,"#FF0D3B"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.storkstyle=grd; c.beginPath(); c.moveTo(210, 175); c.arc(200, 180, 100, -1.1, Math.PI / 4); c.closePath(); c.fill(); c.stroke(); var grd=c.createLinearGradient(230,25,240,170); grd.addColorStop(0,"#1510AC"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.storkstyle=grd; c.beginPath(); c.moveTo(200,170); c.arc(200,185,100,-0.4*Math.PI,Math.PI*1.05,true); c.closePath(); c.fill(); c.stroke(); var grd=c.createLinearGradient(200,310,230,190); grd.addColorStop(0,"#00BFFF"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.storkstyle=grd; c.beginPath(); c.moveTo(200,180); c.arc(200,180,100,70,Math.PI); c.closePath(); c.fill(); c.stroke(); //1 var grd=c.createLinearGradient(20,100,20,680); grd.addColorStop(0,"#FF0D3B"); grd.addColorStop(0.5,"#FFB6AC"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(20,380,40,120); c.rect(20,380,40,120); c.strokeStyle=grd; c.stroke(); var grd=c.createLinearGradient(20,100,20,590); grd.addColorStop(0,"#0EB9FF"); grd.addColorStop(0.4,"#81D4FF"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(60,320,40,180); c.rect(60,320,40,180); c.strokeStyle=grd; c.stroke(); var grd=c.createLinearGradient(20,100,20,590); grd.addColorStop(0,"#0A13FF"); grd.addColorStop(0.4,"#8F9CFF"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(100,340,40,160); c.rect(100,340,40,160); c.strokeStyle=grd; c.stroke(); //2 var grd=c.createLinearGradient(20,100,20,620); grd.addColorStop(0,"#FF0D3B"); grd.addColorStop(0.5,"#FFB6AC"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(220,320,40,180); c.rect(220,320,40,180); c.strokeStyle=grd; c.stroke(); var grd=c.createLinearGradient(20,100,20,550); grd.addColorStop(0,"#0EB9FF"); grd.addColorStop(0.4,"#81D4FF"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(260,420,40,80); c.rect(260,420,40,80); c.strokeStyle=grd; c.stroke(); var grd=c.createLinearGradient(20,100,20,550); grd.addColorStop(0,"#0A13FF"); grd.addColorStop(0.4,"#8F9CFF"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(300,380,40,120); c.rect(300,380,40,120); c.strokeStyle=grd; c.stroke(); //3 var grd=c.createLinearGradient(20,100,20,620); grd.addColorStop(0,"#FF0D3B"); grd.addColorStop(0.5,"#FFB6AC"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(420,360,40,140); c.rect(420,360,40,140); c.strokeStyle=grd; c.stroke(); var grd=c.createLinearGradient(20,100,20,550); grd.addColorStop(0,"#0EB9FF"); grd.addColorStop(0.4,"#81D4FF"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(460,280,40,220); c.rect(460,280,40,220); c.strokeStyle=grd; c.stroke(); var grd=c.createLinearGradient(20,100,20,550); grd.addColorStop(0,"#0A13FF"); grd.addColorStop(0.4,"#8F9CFF"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(500,320,40,180); c.rect(500,320,40,180); c.strokeStyle=grd; c.stroke(); //4 var grd=c.createLinearGradient(20,100,20,620); grd.addColorStop(0,"#FF0D3B"); grd.addColorStop(0.5,"#FFB6AC"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(620,220,40,280); c.rect(620,220,40,280); c.strokeStyle=grd; c.stroke(); var grd=c.createLinearGradient(20,100,20,550); grd.addColorStop(0,"#0EB9FF"); grd.addColorStop(0.4,"#81D4FF"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(660,240,40,260); c.rect(660,240,40,260); c.strokeStyle=grd; c.stroke(); var grd=c.createLinearGradient(20,100,20,550); grd.addColorStop(0,"#0A13FF"); grd.addColorStop(0.4,"#8F9CFF"); grd.addColorStop(1,"#F4F4F4"); c.fillStyle=grd; c.fillRect(700,260,40,240); c.rect(700,260,40,240); c.strokeStyle=grd; c.stroke(); </script> </body> </html>

转载请注明原文地址: https://ju.6miu.com/read-1300084.html

最新回复(0)