11-22-HTML-canvas太极练习

xiaoxiao2021-02-28  17

<!doctype html> <html> <head> <meta charset="utf-8"> <title>太极</title> <script> function draw(){ var canvas=document.getElementById('mycanvas'); var ctx=canvas.getContext('2d'); //大圆 ctx.beginPath(); ctx.strokeStyle="#000000"; ctx.lineWidth=1; var color=ctx.createLinearGradient(500,300,500,700); color.addColorStop(0,"#ffffff");//由白渐变到黑 color.addColorStop(1,"#000000"); ctx.fillStyle=color; ctx.arc(500,500,200,Math.PI*0.5,Math.PI*1.5,false); ctx.stroke(); ctx.fill(); ctx.closePath(); ctx.beginPath(); var color=ctx.createLinearGradient(500,300,500,700);//a(a和b只需要一个改变就可以) color.addColorStop(0,"#000000");//b color.addColorStop(1,"#ffffff");//由黑渐变到白 ctx.fillStyle=color; ctx.arc(500,500,200,Math.PI*1.5,Math.PI*0.5,false); ctx.stroke(); ctx.fill(); ctx.closePath(); //中半圆 ctx.beginPath(); var color=ctx.createLinearGradient(500,300,500,700); color.addColorStop(0,"#000000");//由黑渐变到白 color.addColorStop(1,"#ffffff"); ctx.fillStyle=color; ctx.arc(500,400,100,Math.PI*0.5,Math.PI*1.5,false); ctx.stroke(); ctx.fill(); ctx.closePath(); ctx.beginPath(); var color=ctx.createLinearGradient(500,300,500,700); color.addColorStop(0,"#ffffff");//由白渐变到黑 color.addColorStop(1,"#000000"); ctx.fillStyle=color; ctx.arc(500,600,100,Math.PI*1.5,Math.PI*0.5,false); ctx.stroke(); ctx.fill(); ctx.closePath(); //小圆 ctx.beginPath(); var radgrad=ctx.createRadialGradient(450,400,1,450,400,30); radgrad.addColorStop(0,"#ffffff"); radgrad.addColorStop(1,"#000000");//黑色 ctx.fillStyle=radgrad; ctx.arc(450,400,20,0,Math.PI*2,false); ctx.stroke(); ctx.fill(); ctx.closePath(); ctx.beginPath(); var radgrad=ctx.createRadialGradient(550,600,1,550,600,30); radgrad.addColorStop(0,"#000000");//黑色 radgrad.addColorStop(1,"#ffffff"); ctx.fillStyle=radgrad; ctx.arc(550,600,20,0,Math.PI*2,false); ctx.stroke(); ctx.fill(); ctx.closePath(); } </script> </head> <body onLoad="draw()"> <canvas id="mycanvas" width="1000" height="1000"> </canvas> </body> </html>

 

运行结果:

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

最新回复(0)