這篇文章給大家分享的是有關(guān)HTML5中與文本渲染有關(guān)的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司是專業(yè)的鄯善網(wǎng)站建設(shè)公司，鄯善接單;提供成都網(wǎng)站制作、做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行鄯善網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

與文本渲染有關(guān)的主要有三個屬性以及三個方法：


上述的屬性和方法的基本用法如下：

var canvas = document.getElementById("canvas");   

        var context = canvas.getContext("2d");   

      

        context.font="bold 30px Arial"; //設(shè)置樣式   

        context.strokeStyle = "#1712F4";   

        context.strokeText("歡迎來到我的博客！",30,100);   

      

        context.font="bold 50px Arial";    

        var grd = context.createLinearGradient( 30 , 200, 400 , 300 );//設(shè)置漸變填充樣式   

        grd.addColorStop(0,"#1EF9F7");   

        grd.addColorStop(0.25,"#FC0F31");   

        grd.addColorStop(0.5,"#ECF811");   

        grd.addColorStop(0.75,"#2F0AF1");   

        grd.addColorStop(1,"#160303");   

        context.fillStyle = grd;   

        context.fillText("歡迎來到我的博客！",30,200);   

      

        context.save();   

        context.moveTo(200,280);   

        context.lineTo(200,420);   

        context.stroke();   

        context.font="bold 20px Arial";    

        context.fillStyle = "#F80707";   

        context.textAlign="left";   

        context.fillText("文本在指定的位置開始",200,300);   

        context.textAlign="center";   

        context.fillText("文本的中心被放置在指定的位置",200,350);   

        context.textAlign="right";   

        context.fillText("文本在指定的位置結(jié)束",200,400);   

        context.restore();   

      

        context.save();   

        context.moveTo(10,500);   

        context.lineTo(500,500);   

        context.stroke();   

        context.fillStyle="#F60D0D";   

        context.font="bold 20px Arial";    

        context.textBaseline="top";   

        context.fillText("指定位置在上面",10,500);   

        context.textBaseline="bottom";   

        context.fillText("指定位置在下面",150,500);   

        context.textBaseline="middle";   

        context.fillText("指定位置居中",300,500);   

        context.restore();   

      

      

        context.font="bold 40px Arial";    

        context.strokeStyle = "#16F643";   

        var text = "歡迎來到我的博客！";   

        context.strokeText("歡迎來到我的博客！",10,600);   

        context.strokeText("上面字符串的寬度為："+context.measureText(text).width,10,650);

感謝各位的閱讀！關(guān)于“HTML5中與文本渲染有關(guān)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁標(biāo)題：HTML5中與文本渲染有關(guān)的示例分析-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://chinadenli.net/article34/hpdse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、微信公眾號、外貿(mào)網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、軟件開發(fā)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)