這篇文章主要為大家詳細(xì)介紹了使用canvas標(biāo)簽繪制字體的代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。
創(chuàng)新互聯(lián)建站專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、歷下網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為歷下等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。先看效果圖
html結(jié)構(gòu)
當(dāng)前瀏覽器不支持canvas,請(qǐng)更換瀏覽器后再試
js腳本
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
context = canvas.getContext("2d");
context.font = "bold 40px Arial";
context.fillStyle = "#058";
context.fillText("歡迎學(xué)習(xí)",40,100);
context.lineWidth = 1;
context.strokeStyle = "#058";
context.strokeText("歡迎大家學(xué)習(xí)",40,200);
context.fillText("歡迎大家學(xué)習(xí)繪圖",40,300,400);
context.strokeText("歡迎大家學(xué)習(xí)繪圖",40,400,400);
var linearGrad = context.createLinearGradient(0,0,800,0);
linearGrad.addColorStop(0.0,'red');
linearGrad.addColorStop(0.25,'orange');
linearGrad.addColorStop(0.5,'yellow');
linearGrad.addColorStop(0.75,'green');
linearGrad.addColorStop(1.0,'purple');
context.fillStyle = linearGrad;
context.fillText("歡迎大家學(xué)習(xí)繪圖sdfdsafsadfdsafdsafdsa",40,500);
var backgroundImage = new Image();
backgroundImage.src = "7f638e192b9079e6.jpg";
backgroundImage.onload = function(){
var pattern = context.createPattern(backgroundImage,"repeat");
context.fillStyle = pattern;
context.font = "bold 100px Arial";
context.fillText("Canvas!",40,650);
}
}
注意:7f638e192b9079e6.jpg可以替換為任意圖片
看完上訴內(nèi)容,你們掌握canvas標(biāo)簽繪制字體的方法了嗎?動(dòng)手試試吧。如果想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道!
創(chuàng)新互聯(lián)www.cdcxhl.cn,專業(yè)提供香港、美國(guó)云服務(wù)器,動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇,持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證, 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源,準(zhǔn)確進(jìn)行流量調(diào)度,確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟,新人活動(dòng)云服務(wù)器買多久送多久。