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