当前位置： 移动技术网 > IT编程>网页制作>Html5 > canvas 三 图片插入及文字填充

canvas 三 图片插入及文字填充

2018年11月25日  | 移动技术网IT编程  | 我要评论 
/**
 * 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);

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网