31 canvas使用图片及设置背景

最新推荐文章于 2024-05-27 08:51:51 发布
最新推荐文章于 2024-05-27 08:51:51 发布
阅读量1.2w 收藏 15
点赞数
分类专栏： # canvas 前端重拾 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014331138/article/details/109358423
版权

31 canvas使用图片及设置背景

1 使用图片

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


在canvas中设置背景(需要image对象)
	1.createPattern(image, repetition)
		image:图像源
		epetition:
			"repeat" 
			"repeat-x" 
			"repeat-y" 
			"no-repeat" 
			
	一般情况下，我们都会将createPattern返回的对象作为fillstyle的值

示例

	<head>
		<meta charset="UTF-8">
		<title>12_canvas中的变换放大</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="600" height="400">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			window.onload = function(){
				var canvas = document.querySelector("#test");
				if(canvas.getContext){
					var ctx = canvas.getContext("2d");
					var img = new Image();
					img.src = "image/timg.jpg";
					img.onload = function(){
						draw();
					}
				}
				
				
				function draw(){
					ctx.drawImage(img,0,0,img.width,img.height);
				}
			}
		</script>
	</body>

效果

2 在canvas中设置背景

语法

在canvas中设置背景(需要image对象)
	1.createPattern(image, repetition)
		image:图像源
		epetition:
			"repeat" 
			"repeat-x" 
			"repeat-y" 
			"no-repeat" 
			
	一般情况下，我们都会将createPattern返回的对象作为fillstyle的值。然后使用矩形进行填充

示例

	<head>
		<meta charset="UTF-8">
		<title>15_canvas使用图片做背景</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="600" height="400">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			window.onload = function(){
				var canvas = document.querySelector("#test");
				if(canvas.getContext){
					var ctx = canvas.getContext("2d");
					var img = new Image();
					img.src = "image/timg.jpg";
					img.onload = function(){
						draw();
					}
				}
				
				
				function draw(){
					var pattern = ctx.createPattern(img,"no-repeat")
					ctx.fillStyle=pattern;
					ctx.fillRect(0,0,600,400)
				}
			}
		</script>
	</body>

效果

3 精灵图片

语法

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明：width 绘制图片的宽度，  height：绘制图片的高度
    如果指定宽高，最好成比例，不然图片会被拉伸
    等比公式：  toH = Height * toW   /  Width;  //等比 
             设置高 = 原高度 * 设置宽/ 原宽度;
    sx,sy 裁剪的左上角坐标，
    swidth：裁剪图片的高度。 sheight:裁剪的高度 
    其他同上

示例

	<head>
		<meta charset="UTF-8">
		<title>canvas精灵图片</title>
		<style>
			canvas{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				border: 1px solid #CCC;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您当前浏览器暂不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.getElementById("test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				var img = new Image();
				img.src = "image/NPC-edekillangle.png";
				img.onload = function(){
					ctx.save();
					ctx.beginPath();
					ctx.drawImage(img,0,0,40,65,100,100,40,65);
					ctx.restore();
					
					ctx.save();
					ctx.beginPath();
					ctx.drawImage(img,40,65,40,65,150,100,40,65);
					ctx.restore();
				}
				
			}
		</script>
	</body>

效果

素材

 

丨Anna丨
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
canvas-使用图片&设置背景(图片背景,线性渐变,径向渐变)
nicecode
07-27 5370
在canvas中插入图片(需要image对象) ​ 1.canvas操作图片时，必须要等图片加载完才能操作 ​ 2.drawImage(image, x, y, width, height) ​ 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。 ​ 这个方法多了2个参数：width 和 height，这两个参数用来控制图片的大小 <!DOCTYPE html> <html> <head> <m
canvas-使用图片背景
weixin_54057363的博客
03-09 1934
canvas-使用createPattern()方法,填充图片背景
【unity】2.基础准备：创建Canvas
u012705912的博客
08-05 1236
在Canvas下新建UI-Raw Image，重命名为Background，作为扫雷游戏的背景。宽高调为1920*1080。用PS画一张背景图，存放在Images文件夹下。选中刚才创建的Background，将其Texture设为这张图片。选中Scenes中的SampleScene，将其修改为MineSweeper。在Hierarchy窗口右键，新建一个Canvas窗口。将Game的比例设为16:9，即可看到完整的背景图。
Canvas使用详细教学：从基础绘图到进阶动画再到实战（海报生成、Flappy Bird 小游戏等），掌握绘图与动画的秘诀
最新发布
JINGWHALE
05-27 383
本文从基础绘图到进阶动画再到实战（海报生成、Flappy Bird 小游戏等），详细介绍了Canvas基础绘图方法、颜色与样式、图像操作、动画等内容，让你掌握Canvas绘图与动画的秘诀。
（小程序）canvas 绘制图片做背景（新手向）
weixin_49602763的博客
05-19 2127
小程序绘制图片为背景，首先我们需要把图片先下载下来（这里最好是封装一个函数，因为背景不可能只有一张的）下面是代码，一般直接复制就能使用，有可能需要微调。
canvas替换图片背景色
weixin_45356397的博客
03-21 1488
canvas替换图片背景色。
canvas使用图片作为背景图片
qq_45290368的博客
12-06 1286
使用图片作为canvas的背景图
如何在canvas中模拟css的背景图片样式
sinat_33488770的博客
02-28 632
笔者开源了一个Web思维导图，最近在优化背景图片效果的时候遇到了一个问题，页面上展示时背景图片是通过css使用渲染的，而导出的时候实际上是绘制到canvas上导出的，那么就会有个问题，css的背景图片支持比较丰富的效果，比如通过设置大小，通过设置位置，通过设置重复，但是canvas笔者只找到一个方法，且只支持设置重复效果，那么如何在canvas里模拟一定的css背景效果呢，不要走开，接下来一起来试试。首先要说明的是不会去完美完整100%模拟css的所有效果，因为css。
html5 canvas自动绘制背景图片效果代码
11-06
接下来，我们使用`XMLHttpRequest`或`fetch` API从服务器获取背景图片。这里以`fetch`为例： ```javascript fetch('path/to/your/image.jpg') .then(response => response.blob()) .then(blob => { let img = ...
Canvas 3D甜甜圈图案背景特效
07-24
通过在Canvas上使用贝塞尔曲线、圆弧和其他几何形状，可以精确地绘制出这些圆形并组合成3D效果。3D效果通常是通过透视变换、旋转和平移等技术来模拟的，这使得甜甜圈看起来像是立体的，并且能够随着用户的滚动或交互...
HTML5 canvas背景图片圆形时钟特效代码
03-20
为了使背景图片与时钟结合，我们可以将图片加载到canvas上，使用`ctx.drawImage()`方法。该方法接受图片对象、图片在画布上的起点坐标以及图片的宽度和高度。 接下来，我们需要绘制时钟的指针。时钟的小时、分钟和...
Canvas手扇镶嵌图案背景特效
07-24
- 控制线条的粗细：使用`strokeStyle`设置线条颜色，`lineWidth`设置线条宽度。 - 旋转和定位：使用`translate()`和`rotate()`方法可以改变绘制的坐标系统，使得线条能够按照特定的角度排列。 3. **图案镶嵌** -...
Canvas彩色樱花图案背景特效
07-24
"Canvas彩色樱花图案背景特效"是一个利用Canvas API创建的互动式背景效果，它模拟了樱花飘落的场景，并通过多彩的颜色组合为网页增添了一种独特的视觉体验。 首先，我们要理解Canvas的基本概念。Canvas是一个二维...
canvas标签导出图片时，设置图片背景为白色
qq_27453315的博客
06-01 2479
业务需求：利用canvas标签签名，导出成图片；因为png格式的图片背景透明的，所以需要将背景图片设置为白色。可以寻找图片中透明的pixel，将其变为白色的。转载于:https://www.cnblogs.com/qinmengjiao123-123/p/10300623.html。
Canvas背景绘制-24
编程是一门实践技术
04-04 395
常用的技术称为图块复制(blitting)，即从离屏缓冲区中将内容发生变化的那部分背景图像复制到屏幕上，还有其它两种方法是将所有内容擦除并重新绘制&仅重绘内容发生变化的那部分区域。一般是用clip()方法来实现的.如果背景比较简单采用将所有内容擦除再重新绘制可能性能更好。
HTML5 canvas 设置背景图
热门推荐
小胡仙的博客
01-18 3万+
页面代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;HTML5 canvas 设置背景图&lt;/title&gt; &lt;script src="canvas2image.js"&gt;&lt
通过Canvas画布制作黑客帝国背景
jakelihua
01-07 321
黑客背景，黑客帝国，矩阵
【前端可视化】Canvas 下载图片添加背景色因为缩放导致比例不同问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
06-29 352
比例不同是因为缩放导致的，缩放导致绘图中心发生改变，我们需要把填充的背景色的范围扩大(根据缩放比例来)，同时背景色要绘制在现有画布的后面，防止重叠遮挡。 感觉一个小下载，需要注意的事项还是挺多的，记录下，希望能帮助到其他人，里面的一些 API 请参考 MDN 文档。 下面的参考代码，自己根据自己实际项目需要来修改就行。 // 下载图片 const handleDownloadImg = () =...
canvas 实现动态背景图
HurryUpp的博客
07-27 655
【代码】canvas 实现动态背景图。
canvas设置背景图片
04-28
要在 Canvas 中设置背景图片，可以使用以下步骤： 1. 创建一个 Image 对象，加载要用作背景的图片。 2. 在 Image 对象的 onload 回调函数中，使用 Canvas 的 drawImage 方法将图片绘制到 Canvas 上。 3. 在绘制其他图形之前，使用 Canvas 的 clearRect 方法清除 Canvas 上的任何内容。 下面是一个示例代码： ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 创建一个 Image 对象 var bgImg = new Image(); // 设置图片地址和 onload 回调函数 bgImg.src = 'bg.jpg'; bgImg.onload = function() { // 在 onload 回调函数中，绘制背景图片 ctx.drawImage(bgImg, 0, 0); // 在绘制其他图形之前，清除 Canvas 上的任何内容 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制其他图形 // ... }; ``` 在这个示例中，`bg.jpg` 是要用作背景的图片的地址。在 `onload` 回调函数中，使用 `drawImage` 方法将图片绘制到 Canvas 上。然后使用 `clearRect` 方法清除 Canvas 上的任何内容，以便在绘制其他图形之前不会受到影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丨Anna丨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值