canvas学习(十):font字体设置

时间:2024-11-13 14:51:44

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;
	}
}