canvas画布上平铺图片&&绘制文本

Posted 2021-09-17 孤寒者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas画布上平铺图片&&绘制文本相关的知识，希望对你有一定的参考价值。

1️⃣知识点①：如何在canvas画布上平铺图片：

⚠️知识点实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>画图像</title>
		<style type="text/css">
			#c{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c" width="1078" height="1881"></canvas>
		
	</body>
	<script type="text/javascript">
		var c = document.getElementById("c");
		var jb = c.getContext("2d");
		
		// 创建一个图片对象
		var  img = new Image();
		// 指定图片的内容
		img.src = 'img/1.jpg';				// 值为图片路径
		
		// 注意：图片不能直接放canvas上，需要通过事件.onload加载，不然图片可能因为没有加载完成而未出现在画布
		img.onload = function(){
			// 参数：图片，起始x坐标，起始y坐标，后两个参数指定大小（建议尺寸的比例和原图比例匹配）
			// 后两个参数如果不指定，默认会按原图1:1绘制，显示不下的内容不再显示
			jb.drawImage(this,0,0,1078,1881)
			// 200,200,300,300决定裁剪图片左上到右下区域；后面四个坐标表示所画区域的左上右下坐标
			//jb.drawImage(this,200,200,300,300,0,0,1078,1881)
		}
	
		
	</script>
</html>

⚠️实现效果：

1️⃣知识点②：如何在canvas画布上绘制文本（实心文本＋空心文本）：

⚠️知识点实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制文字</title>
		<style type="text/css">
			#c{
				border: 5px solid blue;
			}
		</style>
	</head>
	<body>
		<canvas id="c" width="1200" height="700"></canvas>
	</body>
	
	<script type="text/javascript">
		var c = document.getElementById("c");
		var ctx = c.getContext("2d");
		
		// 参数：正常字体/斜体  字号  微软雅黑/仿宋             normal:正常字体/italic：斜体
		ctx.font = "normal 100px 仿宋";   

        //ctx.strokeStyle = "red";	   // 字体轮廓颜色
		var jb = ctx.createLinearGradient(0,0,1200,0);   // 字体轮廓渐变色
		jb.addColorStop(0,"red");
		jb.addColorStop(0.2,"blue");
		jb.addColorStop(0.4,"orange");
		jb.addColorStop(0.6,"green");
		jb.addColorStop(0.8,"cyan");
		jb.addColorStop(1,"yellow");
		ctx.strokeStyle = jb;
		// 绘制文本(空心)          参数：文本，左上角x坐标，左上角y坐标，最大显示字符宽
 	    ctx.strokeText("Hello,World!",100,100);   
		
		// 绘制文本(实心)
		ctx.fillStyle = jb;   // 使用渐变色
		ctx.fillText("Hello,World!",100,200);
		
		
	</script>
</html>