免費(fèi)AI編程助手
HTML canvas createRadialGradient() 方法
實(shí)例
繪制一個(gè)矩形，并用放射狀/圓形漸變進(jìn)行填充：
JavaScript：
var c=document.getElementById("myCanvas");
varctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
varctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
嘗試一下 ?
瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 createRadialGradient()方法。
注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
定義和用法
createRadialGradient() 方法創(chuàng)建放射狀/圓形漸變對(duì)象。
漸變可用于填充矩形、圓形、線條、文本等等。
提示：請(qǐng)使用該對(duì)象作為strokeStyle或 fillStyle 屬性的值。
提示：請(qǐng)使用 addColorStop() 方法規(guī)定不同的顏色，以及在 gradient 對(duì)象中的何處定位顏色。
| JavaScript 語(yǔ)法： | context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
參數(shù)值
| 參數(shù) | 描述 |
|---|---|
| x0 | 漸變的開(kāi)始圓的 x 坐標(biāo) |
| y0 | 漸變的開(kāi)始圓的 y 坐標(biāo) |
| r0 | 開(kāi)始圓的半徑 |
| x1 | 漸變的結(jié)束圓的 x 坐標(biāo) |
| y1 | 漸變的結(jié)束圓的 y 坐標(biāo) |
| r1 | 結(jié)束圓的半徑 |
HTML canvas 參考手冊(cè)
更多建議：