注冊(cè)|登錄

聯(lián)系電話:024-31891684  13390130939
沈陽(yáng)軟件公司--沈陽(yáng)軟件定制

沈陽(yáng)軟件開(kāi)發(fā)_沈陽(yáng)軟件公司_沈陽(yáng)軟件定制/軟件/最新技術(shù)

Latest technology最新技術(shù)

HTML5 Canvas漸變圖形繪制[線性、徑向]

瀏覽量:3374

如果您學(xué)習(xí)過(guò)之前的Css屬性有關(guān)漸變的兩講,你會(huì)覺(jué)得很親切的,因?yàn)樵趆tml5里他們的名稱是一樣的。

我們一起來(lái)看代碼注釋講解

線性漸變語(yǔ)法

createLinearGradient(xStart,yStart,xEnd,yEnd);
漸變起點(diǎn)橫坐標(biāo):xStart,縱坐標(biāo):yStart;
漸變終點(diǎn)橫坐標(biāo):xEnd,縱坐標(biāo):yEnd;

來(lái)給漸變加入至少2個(gè)的Stop點(diǎn)吧
addColorStop(offset,color)
offset為0到1的浮點(diǎn)值,來(lái)定義漸變偏移量
color可支持16進(jìn)制、rgb、rgba顏色

 

徑向漸變語(yǔ)法

CreateRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
開(kāi)始圓心橫坐標(biāo):xStart,縱坐標(biāo):yStart,半徑:radiusStart;
結(jié)束圓心橫坐標(biāo):xEnd,縱坐標(biāo):yEnd,半徑:radiusEnd;

addColorStop(offset,color)
offset為0到1的浮點(diǎn)值,來(lái)定義漸變偏移量
color可支持16進(jìn)制、rgb、rgba顏色

[javascript]

//得到畫(huà)布上下文,上節(jié)已講,在此不多說(shuō)
var wh = document.getElementById("canvas");
function draw() {
canvas = document.getElementById("canvas");
if (canvas.getContext) { //檢測(cè)瀏覽器是否兼容
ctx = canvas.getContext("2d"); //你的canvas代碼在這里
return ctx;
}
return null;
}
/*我們用這個(gè)方法來(lái)創(chuàng)建線性漸變
createLinearGradient(xStart,yStart,xEnd,yEnd);
漸變起點(diǎn)橫坐標(biāo):xStart,縱坐標(biāo):yStart;
漸變終點(diǎn)橫坐標(biāo):xEnd,縱坐標(biāo):yEnd;

來(lái)給漸變加入至少2個(gè)的Stop點(diǎn)吧
addColorStop(offset,color)
offset為0到1的浮點(diǎn)值,來(lái)定義漸變偏移量
color可支持16進(jìn)制、rgb、rgba顏色
*/
function CreateLinearGradient() {
var canvas = draw();
var grd = canvas.createLinearGradient(0, 0, 175, 50);
//支持這么多種的顏色定義方式
grd.addColorStop(0, "#9CAAC1");
grd.addColorStop(0.3, "black");
grd.addColorStop(0.6, "rgb(255,255,0)");
grd.addColorStop(1, 'rgba(255,0,0,0.3)');
canvas.fillStyle = grd;
canvas.fillRect(0, 0, 275, 50);
}
/*再來(lái)一個(gè)徑向漸變吧
CreateRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
開(kāi)始圓心橫坐標(biāo):xStart,縱坐標(biāo):yStart,半徑:radiusStart;
結(jié)束圓心橫坐標(biāo):xEnd,縱坐標(biāo):yEnd,半徑:radiusEnd;

addColorStop(offset,color)
offset為0到1的浮點(diǎn)值,來(lái)定義漸變偏移量
color可支持16進(jìn)制、rgb、rgba顏色
*/
function CreateRadialGradient() {
var canvas = draw();
canvas.strokeStyle = "blue";
canvas.lineWidth = 2;
canvas.beginPath();
var grd = canvas.createRadialGradient(120, 220, 0, 120, 220, 90);
grd.addColorStop(0, "#9CAAC1");
grd.addColorStop(0.3, "black");
grd.addColorStop(0.6, "rgb(255,255,0)");
grd.addColorStop(1, 'rgba(255,0,0,0.3)');
canvas.fillStyle = grd;
//arc(x,y,radius[半徑],startAngle[開(kāi)始弧度],endAngle[結(jié)束弧度],anticlockwise[true順時(shí)針繪制,false逆時(shí)針繪制])
canvas.arc(120, 220, 100, 0, 2 * Math.PI, true);
canvas.closePath();
canvas.stroke();
canvas.fill();
}
/*最后看一個(gè)基本方法,擦除
clearRect(x,y,width,heigth);要擦除以x,y坐標(biāo)為起點(diǎn),width,heigth為長(zhǎng)寬的矩形區(qū)域里的內(nèi)容
*/
function Ca() {
var canvas = draw();
canvas.clearRect(0, 0, wh.width, wh.height);
}

[/javascript]

易勢(shì)科技,專注于軟件定制開(kāi)發(fā)。

沈陽(yáng)團(tuán)購(gòu)網(wǎng)|營(yíng)口網(wǎng)站制作|沈陽(yáng)軟件公司|軟件定制|網(wǎng)站建設(shè)|加盟易勢(shì)|提交問(wèn)題

主站蜘蛛池模板: 男女一进一出猛进式抽搐视频| 久久国产免费观看精品| 精品国产杨幂在线观看| 国产在线不卡一区| 娇喘午夜啪啪五分钟娇喘| 好男人在线观看高清视频www| 亚洲免费小视频| 特区爱奴在线观看| 午夜精品久久久久久| 裸のアゲハいきり立つ欲望电影| 夜夜躁狠狠躁日日躁视频| 中文字幕人成无码免费视频| 日韩国产在线观看| 亚洲一区二区三区影院| 欧美特黄三级电影aaa免费| 伊人影院在线视频| 精品人妻中文无码AV在线| 国产乱理伦片a级在线观看| 成人福利小视频| 国产精品99久久久久久宅男 | 国产成人免费网站app下载| 91人人区免费区人人| 欧美顶级aaaaaaaaaaa片| 午夜三级限制福利电影在线看| 亚洲国产激情在线一区| 国产高清不卡视频| h视频在线观看免费完整版| 成人免费乱码大片a毛片| 丰满老熟妇好大bbbbb| 日本高清成本人视频一区| 久久综合九色综合网站| 欧美一级在线观看视频| 亚洲影视一区二区| 欧美精品一区二区三区在线| 亚洲综合伊人制服丝袜美腿| 用我的手指来扰乱吧全集在线翻译 | 夜色福利久久久久久777777| 国精品无码一区二区三区在线| 中文字幕丰满伦子无码| 日产一区日产片| 久久夜色精品国产亚洲|