H5学习笔记(五)--canvas图片、背景和绘制文本

本文详细记录了HTML5 canvas在图片使用、背景设置及文本绘制方面的实践,包括如何在canvas中绘制文本、调整文本样式、测量文本尺寸、实现文本水平垂直居中以及添加阴影效果等关键技巧。
摘要由CSDN通过智能技术生成

使用图片

在canvas中插入图片(需要image对象)
	1.canvas操作图片时,必须要等图片加载完才能操作
	2.drawImage(image, x, y, width, height)
		其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。
		这个方法多了2个参数:width 和 height,这两个参数用来控制当canvas画入时应该缩放的大小
var img = new Image();
img.src="tg.png";
img.onload=function(){
	draw();
}
				
function draw(){
	ctx.drawImage(img,0,0,img.width,img.height)
}

设置背景

在canvas中设置背景(需要image对象)
	1.createPattern(image, repetition)
		image:图像源
		epetition:(平铺)
			"repeat" 
			"repeat-x" 
			"repeat-y" 
			"no-repeat" 		
一般情况下,我们都会将createPattern返回的对象作为fillstyle的值
function draw(){
	var pattern = ctx.createPattern(img,"no-repeat")
	ctx.fillStyle=pattern;
	ctx.fillRect(0,0,300,300);
}

绘制文本

在canvas中绘制文本

canvas 提供了两种方法来渲染文本:
	fillText(text, x, y)
		在指定的(x,y)位置填充指定的文本
	strokeText(text, x, y)
		在指定的(x,y)位置绘制文本边框
var canvas = document.querySelector("#test");
if(canvas.getContext){
	var ctx = canvas.getContext("2d");
	ctx.fillStyle="green"
	ctx.font="40px sans-serif"
	ctx.fillText("小明",100,100);
	ctx.strokeText("小明",100,100);
}

文本样式

font = value
	当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 
	默认的字体是 10px sans-serif。
	font属性在指定时,必须要有大小和字体 缺一不可	
textAlign = value
	文本对齐选项. 可选的值包括: left, right  center. 
textBaseline = value
	描述绘制文本时,当前文本基线的属性。
	top
		文本基线在文本块的顶部。
	middle
		文本基线在文本块的中间。
	bottom
		文本基线在文本块的底部。
var canvas = document.querySelector("#test");
if(canvas.getContext){
	var ctx = canvas.getContext("2d");
	ctx.fillStyle="green";
	ctx.font="40px sans-serif";
	ctx.textAlign="center";
	ctx.textBaseline="middle";//文本基线在中间
	ctx.fillText("小明",0,0);
}

measureText

measureText() 方法返回一个 TextMetrics 对象,包含关于文本尺寸的信息(例如文本的宽度)
var ctx = canvas.getContext("2d");
ctx.fillStyle="green";
ctx.font="60px sans-serif";
ctx.fillText("小明",50,50);
var obj = ctx.measureText("小明");//返回宽度
console.log(obj);

canvas中文本水平垂直居中

var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.font = '60px impact';
oGC.textBaseline = 'middle';  //middle bottom
var w = oGC.measureText('尚硅谷').width;
oGC.fillText('尚硅谷',(oC.width - w)/2 , (oC.height - 60)/2);

阴影(文本阴影&盒模型阴影)

shadowOffsetX = float
	shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,
	它们默认都为 0。
shadowOffsetY = float
	shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,
	它们默认都为 0。
shadowBlur = float
	shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0。
shadowColor = color(必需项)
	shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
			
//文本阴影&盒阴影
oGC.shadowOffsetX = 20;
oGC.shadowOffsetY = 20;
oGC.shadowBlur = 30;
oGC.shadowColor = "yellow";
					
oGC.fillRect(0,0,100,100);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值