js-canvas插入图片，旋转角度

最新推荐文章于 2025-07-16 11:12:30 发布

王小扣

最新推荐文章于 2025-07-16 11:12:30 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_29150765/article/details/85159998

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种在Canvas上绘制旋转图片的方法，强调了图片加载的异步性，并提供了具体实现代码，包括如何调整坐标以适应旋转后的绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：

图片的绘制要在onload的回调中完成，图片的加载时异步的，否则画布上无内容
坐标旋转后，绘制开始的位置要更改

var img = new Image()
img.src = ''
img.onload = function () {
    var can = document.querySelector('canvas');
    can.width = this.height
    can.height = this.width
    var ctx = can.getContext('2d')
    //旋转90度
    ctx.rotate(90 * Math.PI / 180)
    //绘制
    ctx.drawImage(img, 0, -can.width)
}