canvas中的字体设置比较简单,这里就不说别的了,直接上实例代码:
window.οnlοad=function(){ var myCanvas = ("myCanvas"); if(("2d")){ //宽高自适应 // = -20; // = -20; = 900; = 900; var context =("2d"); var content = "Canvas学习之文字渲染"; ="bold 40px Arial";//设置字体、大小等 //="left"; //使用填充色填充字体 ="#058";//填充颜色 ("1、填充字体:"+content,40,100);//在(50,100)的位置进行文字渲染 //空心字体(描边) =2; ="#058"; ("2、空心字体:"+content,40,200); //限制宽度的字体 ("3、限制宽度(400px):"+content,40,300,400);//最后一个参数用来限制字体显示的宽度 ("4、限制宽度(800px):"+content,40,400,800); //渐变字体 var linearGrad = (0,0,800,0) (0,"black"); ("0.25","yellow"); ("0.5","green"); ("0.75","blue"); (1,"black"); =linearGrad; ("5、渐变字体:"+content,40,500); //图像背景字体 var backgroundImage = new Image(); ="";//使用线性渐变实例中生成的效果图作为背景图 backgroundImage.οnlοad=function(){ var pattern = (backgroundImage,"repeat"); =pattern; ="bold 100px Arial"; ("6、背景图字体:"+content,40,600);//填充字体 ("6、背景图字体:"+content,40,600);//对已经填充好的字体进行描边 //上面的两个位置必须一致,才能出现既有背景图又有描边效果的字体,否则 //第一个只有填充了背景图的字体,没有描边。第二个没有背景图,只是个空心的即有描边的字体。 }; }else{ return false; } }