Canvas 设置图片进行 X 轴或(和) Y 轴的翻转

原由scale(x, y)translate(x, y)解决方案方法一方法二总结原由在看萧大直播写代码,第10次直播时,遇到一个在 Canvas 内进行图片翻转,里面用到了一块代码,理解起来有点绕,代码如下:this.game.context.save();let x = this.x + this.width / 2;this.game.co...
摘要由CSDN通过智能技术生成

原由

在看萧大直播写代码,第10次直播时,遇到一个在 Canvas 内进行图片翻转,里面用到了一块代码,理解起来有点绕,代码如下:

this.game.context.save();
let x = this.x + this.width / 2;
this.game.context.translate(x, 0);
this.game.context.scale(-1, 1);
this.game.context.translate(-x, 0);
this.game.context.drawImage(this.texture, 
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas坐标转换为屏幕坐标主要涉及到两个概念:Canvas的坐标系和屏幕的坐标系。Canvas坐标系是指Canvas画布上的坐标系,它的原点在Canvas的左上角,x向右增加,y向下增加;屏幕坐标系是指计算机屏幕上的坐标系,它的原点在屏幕左上角,x向右增加,y向下增加。 在确定Canvas坐标和屏幕坐标之间的转换关系之前,我们首先需要获取Canvas的位置信息,也就是左上角点在屏幕坐标系上的x和y坐标。可以使用以下代码获取: ```javascript const canvas = document.getElementById('myCanvas'); const canvasX = canvas.getBoundingClientRect().left; const canvasY = canvas.getBoundingClientRect().top; ``` 接下来我们需要考虑Canvas上的元素位置信息,如矩形、圆形、文本等。Canvas坐标转换为屏幕坐标的方法有两种: 1. 使用CanvasRenderingContext2D的`transform()`方法:可以通过该方法将Canvas的坐标系转换为屏幕坐标系,从而直接获取元素在屏幕上的位置信息。 ```javascript const ctx = canvas.getContext('2d'); ctx.fillRect(50, 50, 100, 100); //画一个矩形 //获取元素在屏幕上的位置信息 const screenX = 50 + canvasX; const screenY = 50 + canvasY; const screenWidth = 100; const screenHeight = 100; ``` 2. 手动计算转换:将Canvas坐标系中的坐标转换为屏幕坐标系中的坐标,需要注意的是,由于两个坐标系的原点和方向不同,因此转换时需要进行坐标翻转和坐标系平移等操作。 ```javascript const ctx = canvas.getContext('2d'); ctx.fillRect(50, 50, 100, 100); //画一个矩形 //手动计算元素在屏幕上的位置信息 const x = 50; const y = 50; const width = 100; const height = 100; const screenX = x + canvasX; const screenY = canvas.height - y - height + canvasY; const screenWidth = width; const screenHeight = height; ``` 在实际应用中,我们通常会采用第一种方式进行转换,因为它更为简洁方便,同时也是推荐使用的方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值