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 * textbaline * measuretext() * measuret英语疑问词ext(str).width;只有宽度没有高度 * 阴影 * shadowofftx shadowoffty *  shadowblur 高斯模糊值 *  shadowcolor 阴影颜色 */var oc = document.getelementbyid("canvas");var ogc = oc.getcontext('2d');//插入图片var yimg = new image();yimg.onload = func东西半球怎么划分tion(){draw(this);}yimg.src = 'wennuan阿q外传.jpg';function draw(obj){ogc.drawimage(obj,100,0);}//颜色渐变var obj = ogc.createlineargradient(150,100,150,200);obj.addcolorstop(0,'red');obj.addcolors男篮亚洲杯top(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.textbaline = 'top';//top middle bottomvar w = ogc.measuretext('文字');ogc.filltext("文字",(oc.width-w)/2,(oc.height-60)/2); //文字居中水平垂直ogc.stroketext('文字',0-,200);