HTML5 canvas基本繪圖之文字渲染
發(fā)布時(shí)間：2016-06-27 10:30:35 作者：佚名 
我要評(píng)論
我要評(píng)論<canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之文字渲染方法，感興趣的小伙伴們可以參考一下
與文本渲染有關(guān)的主要有三個(gè)屬性以及三個(gè)方法：
上述的屬性和方法的基本用法如下：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
- context.font="bold 30px Arial"; //設(shè)置樣式
- context.strokeStyle = "#1712F4";
- context.strokeText("歡迎來(lái)到我的博客！",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("歡迎來(lái)到我的博客！",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("文本在指定的位置開(kāi)始",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 = "歡迎來(lái)到我的博客！";
- context.strokeText("歡迎來(lái)到我的博客！",10,600);
- context.strokeText("上面字符串的寬度為："+context.measureText(text).width,10,650);
效果如下：
相關(guān)文章
- <canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之繪制陰影方法，感興趣的小伙伴們可以參考一下2016-06-27
- <canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之繪制曲線方法，感興趣的小伙伴們可以參考一下2016-06-27
- <canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之圖形變換，感興趣的小伙伴們可以參考一下2016-06-27
HTML5 canvas基本繪圖之填充樣式實(shí)現(xiàn)
<canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之繪制填充方法，感興趣的小伙伴們可以參考一下2016-06-27- <canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之繪制線條方法，感興趣的小伙伴們可以參考一下2016-06-27
- <canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之繪制五角星方法，感興趣的小伙伴們可以參考一下2016-06-27
- <canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之繪制矩形方法，感興趣的小伙伴們可以參考一下2016-06-27
- 這篇文章主要介紹了在HTML5 Canvas中放入圖片和保存為圖片的方法,特別是把圖片內(nèi)容保存為圖片,是非常實(shí)用的功能,需要的朋友可以參考下2014-05-03
HTML5 canvas畫(huà)圖并保存成圖片的jcanvas插件
HTML5 canvas畫(huà)圖并保存成圖片，下使用了jcanvas插件，具體示例如下感興趣的朋友可以參考下2014-01-17將HTML5 Canvas的內(nèi)容保存為圖片借助toDataURL實(shí)現(xiàn)
將HTML5 Canvas的內(nèi)容保存為圖片主要思想是借助Canvas自己的API - toDataURL()來(lái)實(shí)現(xiàn)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-20