canvas 中 rotate 是怎么旋转的

canvas 中 rotate 是怎么旋转的

月光魔力鸭

2019-12-11 16:45 阅读 704 喜欢 3 canvas rotate

在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。

想要对rotate了解的话,那么需要知道几个以下几点:

OK,我们来实现一个比较简单的需求,如下:

有一个图片,但是是旋转后的,已经旋转了270度,但是通过canvas加载后,想要正常显示出来。OK,就这么一个需求。

先不哔哔,先上结果,再说为啥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas width="4912" height="3459" id="can"></canvas>
</body>
</html>
<script type="text/javascript">
    var canvas = document.getElementById('can');
    var ctx = canvas.getContext('2d');
    var image = new Image();
    image.src = '1.jpg';
    image.onload = function(){
        var width = this.width;
        var height = this.height;
        console.log(width);
        ctx.rotate(270*Math.PI/180);
        ctx.drawImage(this,-width,0,width,height)
    }
</script>

//至于里面的宽高啥的,慢慢根据动态去实现即可。

这段代码大体实现了个什么事情呢?

第一步

第二步

第三步

第四步

到第四步可能还有有点蒙逼,那么我们形象一点。

 手绘版本

这里面还有个问题.. 我也没理解明白,到底画布跟着转么? 按照查找的资料,canvas有两层,一层是虚拟画布,一层是肉眼可见的画布。(我们可以这么理解) 其中,可见的画布保持不变,虚拟画布进行旋转。


OK,灵魂画手又来了,准备一图击杀。

灵魂画手

转载请注明出处: https://chrunlee.cn/article/canvas-rotate-position.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最近一直在想着抓一些网盘数据,进行资料归拢,可是当我真正开始的时候.. 还是遇到了反爬,当然我本身就有心理预期,这是肯定会碰到的,只是没想到会在代理IP上耗费这么久,之前的时候也处理过代理IP ,可是由于一知半解,导致很多配置都不理解,debug全靠猜...
突然来了一个调研任务,想要实现一个类似3D虚拟展厅类似的需求,主要就是放一些学生的作品,然后预览啥的,效果还是要全景的效果。 经过一番调查,最终锁定了以前从未接触过的krpano。
近期需求:将一棵树导出到excel中,树是ztree,通过插件Table2excel导出table到excel中。
现象:在IOS中,jsp页面绑定的点击事件,点击后延迟很大,接近1000ms,反应很慢
业务中有一段涉及到处理canvas的图片然后将内容进行上传,后测试发现在IE中不好使哎...
今天小程序上传体验版本后莫名无法获取用户数据,但是本地开发环境是正常的,通过开发工具的真机进行测试也正常,但是通过开发工具的预览又不正常,初步来看代码是没有问题的,可能是哪里设置有问题。
对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性?
关于web打印,需要对页面内容进行页面样式设置,呈现出分页的样子,同时对于题目中的图片或表格尽量不分到两个页面中,因此实现了一个jquery的web打印插件,当然,这个插件目前只适用于部分情况,仅供借鉴