canvas 三 图片插入及文字填充

标签：

/**
 * canvas插入图片
 * 等图片加载完，在执行canvas操作
 * 		图片预加载：在onload 中调用方法
 * drawImage(oImg,x,y,w,h)
 * 		oImg:图片x,y坐标
 * 		w,h宽高
 * 
 * 设置背景
 * createPattern(oImg,平铺方式)
 * 		repeat,repeat-x,repeat-y,no-repeat
 * 
 * 渐变
 * 	createLinearGradient(x1,y1,x2,y2)
 * 	createRadialGradient(x1,y1,r1,x2,y2,r2)
 * 		第一个圆的坐标及半径
 * 
 * canvas填充文本
 * 	strokeText(文字,x,y) 文字边框的填充
 * 	fillText(文字,x,y)
 * 	font
 * 	textAlign
 * 	textBaseline
 * 	measureText()
 * 		measureText(str).width;只有宽度没有高度
 * 	阴影
 * 		shadowOffsetX shadowOffsetY
 * 	 	shadowBlur 高斯模糊值
 * 	 	shadowColor 阴影颜色
 */
var oc = document.getElementById("canvas");
var ogc = oc.getContext('2d');
//插入图片
var yImg = new Image();

	yImg.onload = function(){
		draw(this);
	}
	yImg.src = 'wennuan.jpg';

	function draw(obj){
		ogc.drawImage(obj,100,0);
	}
//颜色渐变
var obj = ogc.createLinearGradient(150,100,150,200);
obj.addColorStop(0,'red');
obj.addColorStop(1,'blue');
ogc.fillStyle = obj;
ogc.fillRect(150,100,100,100);
//径向渐变
var obj = ogc.createRadialGradient(200,200,100,200,100,150);
addColorStop(0,'red');
addColorStop(0.5,'yellow');
addColorStop(1,'blue');
ogc.fillStyle(obj);
ogc.fillRect(0,0,oc.width,oc.height);
//文字填充
ogc.font = '30px fontFamilu';//第二个参数必填
ogc.textBaseLine = 'top';	//top middle bottom
var w = ogc.measureText('文字');
ogc.fillText("文字",(oc.width-w)/2,(oc.height-60)/2); //文字居中水平垂直
ogc.strokeText('文字',0-,200);

canvas 三 图片插入及文字填充

标签：

原文地址：http://blog.csdn.net/kaizi524/article/details/51333708