canvas-使用图片&设置背景(图片背景,线性渐变,径向渐变)

最新推荐文章于 2024-08-16 13:20:36 发布

时光无声￡

最新推荐文章于 2024-08-16 13:20:36 发布

阅读量5.5k

点赞数 9

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

本文链接：https://blog.csdn.net/weixin_44586981/article/details/119110403

版权

canvas 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在canvas中插入图片和设置背景，包括等待图片加载完成后的drawImage方法，以及利用createPattern创建图像背景。同时，文章详细阐述了如何创建线性和径向渐变，为canvas元素增添丰富的视觉效果。

摘要由CSDN通过智能技术生成

在canvas中插入图片(需要image对象)

1.canvas操作图片时，必须要等图片加载完才能操作
2.drawImage(image, x, y, width, height)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
这个方法多了2个参数：width 和 height，这两个参数用来控制图片的大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				var img = new Image();
				img.src="1.png";
				img.onload=function(){
					draw();
				}
				
				function draw(){
					ctx.drawImage(img,0,0,img.width,img.height)
				}
				
			}
		}
		
		
	</script>
</html>

在canvas中设置背景(需要image对象)

1.createPattern(image, repetition)
image:图像源
epetition:
“repeat”
“repeat-x”
“repeat-y”
“no-repeat”

一般情况下，我们都会将createPattern返回的对象作为fillstyle的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				var img = new Image();
				img.src="tg.png";
				img.onload=function(){
					draw();
				}
				
				function draw(){
					var pattern = ctx.createPattern(img,"no-repeat")
					ctx.fillStyle=pattern;
					ctx.fillRect(0,0,300,300);
				}
				
			}
		}
		
		
	</script>
</html>

渐变

canvas渐变（线性渐变）
createLinearGradient(x1, y1, x2, y2)
表示渐变的起点 (x1,y1) 与终点 (x2,y2)

	gradient.addColorStop(position, color)
			gradient :createLinearGradient的返回值
			addColorStop 方法接受 2 个参数，
				position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。
								例如，0.5 表示颜色会出现在正中间。
				color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
			
					var gradient =  ctx.createLinearGradient(0, 0, 300, 300);
					gradient.addColorStop(0,"red");
					gradient.addColorStop(0.5,"yellow");
					gradient.addColorStop(0.7,"pink");
					gradient.addColorStop(1,"green");
					ctx.fillStyle=gradient;
					ctx.fillRect(0,0,300,300);

				
			}
		}
		
		
	</script>
</html>

canvas渐变（径向渐变）
createRadialGradient(x1, y1, r1, x2, y2, r2)
前三个参数则定义另一个以(x1,y1) 为原点，半径为 r1 的圆，
后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
					var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 150)
					gradient.addColorStop(0,"red");
					gradient.addColorStop(0.5,"yellow");
					gradient.addColorStop(0.7,"pink");
					gradient.addColorStop(1,"green");
					ctx.fillStyle=gradient;
					ctx.fillRect(0,0,300,300);
				
			}
		}
		
		
	</script>
</html>