当前位置:首页 >  站长 >  编程技术 >  正文

canvas实现图片镜像翻转的2种方式

 2021-03-01 11:42  来源: 脚本之家   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

这篇文章主要介绍了canvas实现图片镜像翻转的2种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1. 通过canvas自带的画布方法进行翻转

var img = new Image(); //这个就是 img标签的dom对象
img.src = './sy.png';
img.onload = function () {
//图片加载完成后,执行此方法
ctx.drawImage(img, posx, posy, 210, 80);
};

play.addEventListener('click', function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);//清除画布
//位移来做镜像翻转
ctx.translate(210+ posx * 2, 0);
ctx.scale(-1, 1); //左右镜像翻转

//ctx.translate(0, 160 + posy * 2);
//ctx.scale(1, -1); //上下镜像翻转
ctx.drawImage(img, 0, 0, 210, 80);
});

2.像素点的镜像翻转方法

//竖向像素反转
function imageDataVRevert(sourceData, newData) {
for (var i = 0, h = sourceData.height; i < h; i++) {
for (var j = 0, w = sourceData.width; j < w; j++) {
newData.data[i * w * 4 + j * 4 + 0] =
sourceData.data[(h - i) * w * 4 + j * 4 + 0];
newData.data[i * w * 4 + j * 4 + 1] =
sourceData.data[(h - i) * w * 4 + j * 4 + 1];
newData.data[i * w * 4 + j * 4 + 2] =
sourceData.data[(h - i) * w * 4 + j * 4 + 2];
newData.data[i * w * 4 + j * 4 + 3] =
sourceData.data[(h - i) * w * 4 + j * 4 + 3];
}
}
return newData;
}

到此这篇关于canvas实现图片镜像翻转的2种方式的文章就介绍到这了,更多相关canvas图片镜像翻转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/html5/736624.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
html5canvas

相关文章

  • Canvas 帧动画吃苹果小游戏

    这篇文章主要介绍了Html5饼图绘制实现统计图的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    html5canvas
  • canvas实现滑动验证的实现示例

    这篇文章主要介绍了canvas实现滑动验证的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    html5canvas
  • 关于canvas.toDataURL 在iOS运行失败的问题解决

    这篇文章主要介绍了关于canvas.toDataURL在iOS运行失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  • 如何在Canvas上的图形/图像绑定事件监听的实现

    这篇文章主要介绍了如何在Canvas上的图形/图像绑定事件监听的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    html5canvas
  • 为Canvas而生:开源2D HTML5渲染引擎CutJS

    摘要:CutJS是一款专门用于跨平台游戏开发的开源2DHTML5渲染引擎,轻量级、快速、可交互,能够非常良好地解决Canvas所存在的一些缺陷问题,提供类似于DOM树的数据模型,并在内部管理渲染周期和应用绘制。CutJS是一款专门用于跨平台游戏开发的开源2DHTML5渲染引擎,轻量级、快速、可交互,

    标签:
    html5canvas

热门排行

信息推荐