700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html canvas 水平翻转 html5 canvas 图片水平翻转

html canvas 水平翻转 html5 canvas 图片水平翻转

时间:2019-09-23 00:40:28

相关推荐

html canvas 水平翻转 html5 canvas 图片水平翻转

一个html5游戏 要求把图片 水平翻转 在网上找了资料要不是看不懂 就是看了没用 不满足需求

图片翻转 可以利用css IE的滤镜 由于项目不需要兼容IE所以直接无视它 o(∩_∩)o 哈哈

图片翻转有以下几种方式:

css

-moz-transform: matrix(-1, 0, 0, 1, 0, 0); chrome safari

-webkit-transform: matrix(-1, 0, 0, 1, 0, 0); FF

canvas

1.像素级别的操作 canvas里面每个像素点都有保存rgb跟透明度 ctx.getImageData获取之后把像素点的值进行交换。

2.画布翻转方式。

//以右上点为中心 向右翻转画布

cxt.translate(canvas.width, 0);

cxt.scale(-1, 1);

//画图

cxt.drawImage(img2, canvas.width - img2.width*2, 0);

//翻转回来

cxt.translate(canvas.width, 0);

cxt.scale(-1, 1);

这种操作既简单又方便

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。