與文本渲染有關的主要有三個屬性以及三個方法:
上述的屬性和方法的基本用法如下:
JavaScript Code復制內容到剪貼板
- var canvas = document.getElementById("canvas");
- var context = canvas.getContext("2d");
-
- context.font="bold 30px Arial"; //設置樣式
- context.strokeStyle = "#1712F4";
- context.strokeText("歡迎來到我的博客!",30,100);
-
- context.font="bold 50px Arial";
- var grd = context.createLinearGradient( 30 , 200, 400 , 300 );//設置漸變填充樣式
- 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("文本在指定的位置結束",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);
-
效果如下:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。