如何設(shè)置Canvas漸變

小編給大家分享一下如何設(shè)置Canvas漸變，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

    Canvas-漸變

    漸變可以填充在矩形,圓形,線條,文本等等,各種形狀可以自己定義不同的顏色。

    以下有兩種不同的方式來設(shè)置Canvas漸變：

    createLinearGradient(x,y,x1,y1)-創(chuàng)建線條漸變

    createRadialGradient(x,y,r,x1,y1,r1)-創(chuàng)建一個徑向/圓漸變

    當(dāng)我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。

    addColorStop()方法指定顏色停止，參數(shù)使用坐標(biāo)來描述，可以是0至1.

    使用漸變，設(shè)置fillStyle或strokeStyle的值為漸變，然后繪制形狀，如矩形，文本，或一條線。

    使用createLinearGradient():

    實例

    創(chuàng)建一個線性漸變。使用漸變填充矩形:

    JavaScript:

    varc=document.getElementById("myCanvas");

    varctx=c.getContext("2d");

    //創(chuàng)建漸變

    vargrd=ctx.createLinearGradient(0,0,200,0);

    grd.addColorStop(0,"red");

    grd.addColorStop(1,"white");

    //填充漸變

    ctx.fillStyle=grd;

    ctx.fillRect(10,10,150,80);

    使用createRadialGradient():

    實例

    創(chuàng)建一個徑向/圓漸變。使用漸變填充矩形：

    JavaScript:

    varc=document.getElementById("myCanvas");

    varctx=c.getContext("2d");

    //創(chuàng)建漸變

    vargrd=ctx.createRadialGradient(75,50,5,90,60,100);

    grd.addColorStop(0,"red");

    grd.addColorStop(1,"white");

    //填充漸變

    ctx.fillStyle=grd;

    ctx.fillRect(10,10,150,80);

以上是“如何設(shè)置Canvas漸變”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！