HTML DOM createRadialGradient() ·½·¨

¶¨ÒåºÍÓ÷¨

createRadialGradient() ·½·¨´´½¨Ò»Ìõ·ÅÉäÑÕÉ«½¥±ä¡£

Óï·¨

createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

²ÎÊý

²ÎÊý ÃèÊö
xStart, yStart ¿ªÊ¼Ô²µÄÔ²ÐĵÄ×ø±ê¡£
radiusStart ¿ªÊ¼Ô²µÄ°ë¾¶¡£
xEnd, yEnd ½áÊøÔ²µÄÔ²ÐĵÄ×ø±ê¡£
radiusEnd ½áÊøÔ²µÄ°ë¾¶¡£

·µ»ØÖµ

±íʾһ¸ö·ÅÉäÐÔÑÕÉ«½¥±äµÄÒ»¸ö CanvasGradient ¶ÔÏó¡£

ÃèÊö

Õâ¸ö·½·¨´´½¨²¢·µ»ØÁËÒ»¸öÐ嵀 CanvasGradient ¶ÔÏ󣬸öÔÏóÔÚÁ½¸öÖ¸¶¨Ô²µÄÔ²ÖÜÖ®¼ä·ÅÉäÐԵزåÖµÑÕÉ«¡£×¢Ò⣬Õâ¸ö·½·¨²¢Ã»ÓÐÖ¸¶¨ÈκÎÓÃÀ´½¥±äµÄÑÕÉ«¡£Ê¹Ó÷µ»Ø¶ÔÏóµÄ addColorStop() ·½·¨×öµ½ÕâÒ»µã¡£ÒªÊ¹ÓÃÒ»¸ö½¥±äÀ´¹´ÀÕÏßÌõ»òÌî³äÇøÓò£¬Ö»ÐèÒª°Ñ CanvasGradient ¶ÔÏ󸳸ø strokeStyle ÊôÐÔ»ò fillStyle ÊôÐÔ¼´¿É¡£

·ÅÉäÐÔ½¥±äµÄ»æÖÆ·½·¨

ʹÓõÚÒ»¸öÔ²µÄÔ²ÖÜÔÚÆ«ÒÆ 0 ´¦µÄÑÕÉ«ºÍµÚ¶þ¸öÔ²µÄÔ²ÖÜÔÚÆ«ÒÆ 1 ´¦µÄÑÕÉ«£¬ÔÚÁ½¸öλÖÃÖ®¼äµÄÔ²ÉϲåÈëÑÕɫֵ£¨ºìÉ«¡¢ÂÌÉ«¡¢À¶É«ºÍ alpha£©¡£

²ÎÔÄ

CanvasGradient.addColorStop()

CanvasRenderingContext2D.createLinearGradient()

VUE