欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

canvas 三 图片插入及文字填充

程序员文章站 2023-11-02 19:33:10
/** * canvas插入图片 * 等图片加载完,在执行canvas操作 * 图片预加载:在onload 中调用方法 * drawimage(oimg,x,y,w,h)...
/**
 * 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);