HTML5 Canvas 填充與描邊(Fill And Stroke)
創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供桐鄉(xiāng)企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為桐鄉(xiāng)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。演示HTML5 Canvas Fill 與Stroke文字效果，基于Canvas如何實(shí)
現(xiàn)紋理填充與描邊。
一：顏色填充與描邊
顏色填充可以通過(guò)fillStyle來(lái)實(shí)現(xiàn)，描邊顏色可以通過(guò)strokeStyle來(lái)實(shí)現(xiàn)。簡(jiǎn)單示例
如下：
// fill and stroke text
ctx.font ='60pt Calibri';
ctx.lineWidth = 3;
ctx.strokeStyle ='green';
ctx.strokeText('Hello World!', 20, 100);
ctx.fillStyle ='red';
ctx.fillText('Hello World!', 20, 100);
二：紋理填充與描邊
HTML5 Canvas還支持紋理填充，通過(guò)加載一張紋理圖像，然后創(chuàng)建畫(huà)筆模式，創(chuàng)建
紋理模式的API為ctx.createPattern(imageTexture,"repeat");第二參數(shù)支持四個(gè)
值，分別為”repeat-x”, ”repeat-y”, ”repeat”,”no-repeat”意思是紋理分別沿著
X軸，Y軸，XY方向沿重復(fù)或者不重復(fù)。紋理描邊與填充的代碼如下：
var woodfill = ctx.createPattern(imageTexture,"repeat");
ctx.strokeStyle = woodfill;
ctx.strokeText('Hello World!', 20, 200);
// fill rectangle
ctx.fillStyle = woodfill;
ctx.fillRect(60, 240, 260, 440);
紋理圖片：
三：運(yùn)行效果
代碼：
Canvas Fill And Stroke Text Demo HTML5 Canvas Text Demo - By Gloomy Fish
Fill And Stroke
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
