Canvas繪製漸變

時間 2019-12-14

標籤 canvas 繪製漸變简体版

原文原文鏈接

1.繪製線性漸變javascript

Canvas提供了用於建立線性漸變的函數createLinearGradient（x0,y0,x1,y1）,座標點（x0,y0）是起點，（x1,y1）是終點 html

建立一個漸變色 java

var gradient=createLinearGradient(0,0,300,0);

定義漸變色顏色canvas

ctx.addColorStop(stop,color);
ctx.addColorStop(0,"#f00");
ctx.addColorStop(1,"#00f");

設置Canvas內容的fillStyle爲當前的漸變對象，而且繪製這個圖形函數

1 ctx.fillStyle=gradient;         //設置fillStyle爲當前的漸變對象
2 ctx.fillRect(0,0,400,300);      //繪製漸變圖形

一個線性漸變的圖形spa

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8    <canvas id="myCanvas"></canvas>
 9 
10    <script type="text/javascript">
11        var canvas=document.getElementById("myCanvas");
12        if(canvas && canvas.getContext){
13            var ctx=canvas.getContext("2d");
14            var grad=ctx.createLinearGradient(0,0,300,0); //建立一個漸變色線性對象
15            grad.addColorStop(0,"#f00");                  //定義漸變色顏色
16            grad.addColorStop(1,"#00f");
17            ctx.fillStyle=grad;                         //設置fillStyle爲當前的漸變對象
18            ctx.fillRect(0,0,300,100);                    //繪製漸變圖形
19        }
20    </script>
21 </body>
22 </html>

顯示：code

2.繪製徑向漸變：注意在繪製徑向漸變時，可能會由於Canvas的寬度或者高度設置不合適，致使徑向漸變顯示不徹底，須要考慮調整Canvas的尺寸htm

建立一個沿兩個圓之間的錐面繪製漸變對象

 createRadialGradient(x0,y0,r0,x1,y1,r1);

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <canvas id="myCanvas" width="400px" height="300px"></canvas>
 9 
10 <script type="text/javascript">
11     var canvas=document.getElementById("myCanvas");
12     if(canvas && canvas.getContext){
13         var ctx=canvas.getContext("2d");
14         var grad=ctx.createRadialGradient(200,200,50,200,200,200) //建立一個漸變色線性對象
15         grad.addColorStop(0,"#f00");                  //定義漸變色顏色
16         grad.addColorStop(1,"#00f");
17         ctx.fillStyle=grad;                         //設置fillStyle爲當前的漸變對象
18         ctx.fillRect(0,0,400,400);                    //繪製漸變圖形
19     }
20 </script>
21 </body>
22 </html>

顯示blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。