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

最新推荐文章于 2024-11-27 14:14:19 发布

qq_44753552

最新推荐文章于 2024-11-27 14:14:19 发布

阅读量906

点赞数 1

分类专栏： HTML5 文章标签： canvas

本文链接：https://blog.csdn.net/qq_44753552/article/details/108586677

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细记录了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);