猿问

求助,这张背景图能否用css画出来啊?

如果能的华,怎么画啊,跪求了

慕的地8271018
浏览 629回答 1
1回答

慕容森

用canvas大致画了一个。有点差异,具体的效果可以自己改var&nbsp;c&nbsp;=&nbsp;document.getElementById("myCanvas"); var&nbsp;ctx&nbsp;=&nbsp;c.getContext("2d"); var&nbsp;clg&nbsp;=&nbsp;ctx.createLinearGradient(0,&nbsp;0,&nbsp;0,&nbsp;-640); ctx.fillStyle&nbsp;=&nbsp;"#fc3"; ctx.fillRect(0,&nbsp;0,&nbsp;719,&nbsp;1280); ctx.strokeStyle&nbsp;=&nbsp;"transparent"; ctx.fillStyle&nbsp;=&nbsp;clg; draw(23); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ctx.translate(360,&nbsp;640); ctx.fillStyle&nbsp;=&nbsp;"#fc3"; ctx.beginPath(); ctx.arc(0,&nbsp;0,&nbsp;25,&nbsp;0,&nbsp;2&nbsp;*&nbsp;Math.PI); ctx.closePath(); ctx.stroke(); ctx.fill(); ctx.translate(-360,&nbsp;-640); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function&nbsp;draw(n)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;n;&nbsp;i&nbsp;++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.translate(360,&nbsp;640); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.rotate(2&nbsp;*&nbsp;Math.PI&nbsp;/&nbsp;n&nbsp;*&nbsp;i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clg.addColorStop(0.6,&nbsp;"#ff6"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clg.addColorStop(0.9,&nbsp;"#fc3"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.beginPath(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.moveTo(0,&nbsp;0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(-50,&nbsp;-640); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.lineTo(50,&nbsp;-640); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.closePath(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.stroke(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.fill(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.rotate(-2&nbsp;*&nbsp;Math.PI&nbsp;/&nbsp;n&nbsp;*&nbsp;i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ctx.translate(-360,&nbsp;-640); &nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp; };
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答