使用canvas实现对图片的翻转

要通过canvas实现对图片沿x轴或者颜色y轴实现翻转，我们可以通过canvas2d的接口进行实现。

使用到的api：
使用getContext来获取canvas2d对象
使用 canvas2d对象的scale方法进行翻转
由于翻转的xy轴使用的是原点，也就是canvas的左上角的位置的轴，所以，我们还需要使用到translate方法，来移动将翻转后的图片移动到canvas的显示区域

逻辑说完了，那么上一下简短的翻转代码：

沿x轴翻转代码：

        //垂直翻转ctx.scale(1, -1);ctx.translate(0, -canvas.height);

沿y轴翻转代码：

        //水平翻转ctx.scale(-1, 1);ctx.translate(-canvas.width, 0);

以上就是沿x轴和y轴翻转的代码，下面再奉上一个demo的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
</body>
<script>var preName = './textures/build/admin_edit/1574131406/a1574212341_p0_';var img = new Image();img.src = preName+ 'x.jpg';img.onload = function () {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.height = img.height;canvas.width = img.width;//水平翻转ctx.scale(-1, 1);ctx.translate(-img.width, 0);//垂直翻转ctx.scale(1, -1);ctx.translate(0, -img.height);ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);canvas.style.cssText = 'position:fixed; left:0; top:0;';document.body.appendChild(canvas);}
</script>
</html>

使用canvas实现对图片的翻转相关推荐

前端实现图片快速反转替换_HTML5开发之canvas实现元素图片镜像翻转动画效果的方法...
一.Canvas图片水平镜像翻转效果预览您可以狠狠的点击这里:canvas图片水平镜像翻转动画demo demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实 ...
前端实现图片快速反转替换_在canvas上实现元素图片镜像翻转动画效果的方法
一.Canvas图片水平镜像翻转效果预览 demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转, ...
flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧! 一.Canvas图片水平镜像翻转效果预览 ...
使用七牛图片遇到的图片方向翻转问题
需求场景: 移动端项目,用户上传图片,然后前端进行滤镜处理并加入文字在图片上,返回给用户处理过后的图片,结果页可分享. 最开始的想法是通过canvas处理本地图片,然后将canvas转成图片,再把转换 ...
前端实现图片快速反转替换_canvas实现图片镜像翻转的2种方式
这篇文章我们来讲一下在网站建设中,canvas实现图片镜像翻转的2种方式.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 1. 通过canvas自带的画布方法进行翻转 var ...
html5 canvas 加载图片
html5 canvas 加载图片视频 https://www.bilibili.com/video/BV19E411G7Vj?p=30 https://www.bilibili.com/video ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈
小程序之保存canvas生成商品图片附加小程序二维码分享到朋友圈一.概述需要用到的生成二维码组件(可自行下载添加到小程序根目录utils里):https://github.com/demi52 ...
python如何让图片镜像翻转_98后常春藤学霸林之秋，一作拿下CVPR最佳论文提名，首次挑战图片翻转不变性假设...
今年CVPR 最大的亮点之一,当属"后浪"们在学术研究上的出色表现. 在一众获奖论文作者中,年龄最小的一位一作获奖者甚至还在本科阶段.他就是来自康奈尔大学的"98后&qu ...

使用canvas实现对图片的翻转

使用canvas实现对图片的翻转相关推荐

最新文章

热门文章