canvas图片旋转

已于 2024-03-06 13:25:05 修改
阅读量1k 收藏 8
点赞数 15
文章标签： javascript
于 2024-03-05 16:45:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/karl1966/article/details/136372413
版权

被水印旋转和签名旋转折磨了几天，记录一下免得忘了

首先是创建canvas对象

<template>
  <div class="canvas-container">
    <canvas ref="canvasRef" id="canvas"></canvas>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'


const canvasRef = ref<HTMLCanvasElement>()
const ctx = ref<CanvasRenderingContext2D | null>()

const initCanvas = () => {
  if (canvasRef.value) {
    canvasRef.value.width = 1000
    canvasRef.value.height = 500
    ctx.value = canvasRef.value.getContext('2d')
  }
  
}
onMounted(() => {
  initCanvas()
})
</script>
<style lang="scss" scoped>
  #canvas {
    width: 1000px;
    height: 500px;
  }
</style>

canvas存在默认宽高，注意是canvas的实例宽高，默认300*150，不是style样式宽高，

这里一定要注意，canvas的style的宽高，和canvas实例的宽高需要相同，否则创建出来的canvas内容会按比例转换，比如

<script setup lang="ts">
import { onMounted, ref } from 'vue'


const canvasRef = ref<HTMLCanvasElement>()
const ctx = ref<CanvasRenderingContext2D | null>()

const initCanvas = () => {
  if (canvasRef.value) {
    canvasRef.value.width = 1000
    canvasRef.value.height = 500

    ctx.value = canvasRef.value.getContext('2d')
  }
  if (ctx.value) {
    let aspectRatio = 1
    if (canvasRef.value) {
      aspectRatio = canvasRef.value.height / canvasRef.value.width
    }
    ctx.value.translate(100, 100)
    ctx.value.fillStyle = '#953265'
    ctx.value.fillRect(0, 0, 50, 50)
  }
}
onMounted(() => {
  initCanvas()
})
</script>

<template>
  <div class="canvas-container">
    <canvas ref="canvasRef" id="canvas"></canvas>
  </div>
</template>

<style lang="scss" scoped>
  #canvas {
    width: 500px;
    height: 500px;
  }
</style>

按照代码来说，希望canvas移动到（100,100）的位置，并且创建一个50*50的方块，实际上创建的结果是这样的

方块的位置和大小都被等比例压缩了

接下来重新开始，创建canvas，设置宽高， 移动canvas画布位置到（100,100），画一张图片，注意canvas的坐标是以左上角为中心点，向右下展开，水平方向为x轴，竖直方向为y轴

使用drawImage方法画图时注意，图片如果不指定宽高，会直接按图片原始宽高画图，如果希望等比例缩放图片，可以在图片加载后算好宽高比，再指定图片宽高

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const canvasRef = ref<HTMLCanvasElement>()
const ctx = ref<CanvasRenderingContext2D | null>()
const canvasWidth = 1000;
const canvasHeight = 500;

const initCanvas = () => {
  if (canvasRef.value) {
    canvasRef.value.width = canvasWidth
    canvasRef.value.height = canvasHeight

    ctx.value = canvasRef.value.getContext('2d')
  }
  if (ctx.value) {
    ctx.value.translate(100, 100)
    const img = document.createElement('img')
    img.src = '/car.png'
    img.onload = (e) => {
      console.log(img.width)
      console.log(img.height)
      ctx.value?.drawImage(img, 0, 0, 128, 80);
      // ctx.value?.rotate(45*Math.PI/180)
      // ctx.value?.drawImage(img, 0, 0, 128, 80);
    }
  }
}
onMounted(() => {
  initCanvas()
})
</script>

<template>
  <div class="canvas-container">
    <canvas ref="canvasRef" id="canvas" :style="{
      width: `${canvasWidth}px`,
      height: `${canvasHeight}px`
    }"></canvas>
  </div>
</template>

<style lang="scss" scoped>
.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid;
}
</style>

结果如下

再把画布旋转45度，画图，结果如下 

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const canvasRef = ref<HTMLCanvasElement>()
const ctx = ref<CanvasRenderingContext2D | null>()
const canvasWidth = 1000;
const canvasHeight = 500;

const initCanvas = () => {
  if (canvasRef.value) {
    canvasRef.value.width = canvasWidth
    canvasRef.value.height = canvasHeight

    ctx.value = canvasRef.value.getContext('2d')
  }
  if (ctx.value) {
    ctx.value.translate(100, 100)
    const img = document.createElement('img')
    img.src = '/car.png'
    img.onload = (e) => {
      console.log(img.width)
      console.log(img.height)
      ctx.value?.drawImage(img, 0, 0, 128, 80);
      ctx.value?.rotate(45*Math.PI/180)
      ctx.value?.drawImage(img, 0, 0, 128, 80);
    }
  }
}
onMounted(() => {
  initCanvas()
})
</script>

<template>
  <div class="canvas-container">
    <canvas ref="canvasRef" id="canvas" :style="{
      width: `${canvasWidth}px`,
      height: `${canvasHeight}px`
    }"></canvas>
  </div>
</template>

<style lang="scss" scoped>
.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid;
}
</style>

可以看到，canvas的旋转是围绕左上角的

那么如何将图片围绕中心旋转呢，基本思路大概就是利用三角函数计算旋转之后向中心点移动的参数(PS：三角函数的知识早就忘记了，又捡起来看了一遍，都是泪)

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const canvasRef = ref<HTMLCanvasElement>()
const ctx = ref<CanvasRenderingContext2D | null>()
const canvasWidth = 1000
const canvasHeight = 500
const rectWidth = 150
const rectHeight = 60
const deg = 60
const getRotateParams = (deg: number, width: number, height: number) => {
  const x =  (width/2)*Math.cos(Math.PI*deg/180) + (height/2)*Math.sin(Math.PI*deg/180) - width/2
  const y =
    (Math.cos((Math.PI * deg) / 180) * height) / 2 -
    (Math.sin((Math.PI * deg) / 180) * width) / 2 -
    height / 2
  return {
    x,
    y
  }
}


const initCanvas = () => {
  if (canvasRef.value) {
    canvasRef.value.width = canvasWidth
    canvasRef.value.height = canvasHeight

    ctx.value = canvasRef.value.getContext('2d')
  }
  if (ctx.value) {
    const img = document.createElement('img')
    img.src = '/car.png'
    img.onload = () => {
      const imgAspectRatio = img.height / img.width
      const imgWidth = 200
      const imgHeight = imgWidth * imgAspectRatio
      ctx.value?.drawImage(
        img,
        (canvasWidth - imgWidth) / 2,
        (canvasHeight - imgHeight) / 2,
        imgWidth,
        imgHeight
      )
      ctx.value?.rotate((deg * Math.PI) / 180)
      const { x, y } = getRotateParams(deg,canvasWidth,canvasHeight)
      ctx.value?.translate(x, y)
      ctx.value?.drawImage(
        img,
        (canvasWidth - imgWidth) / 2,
        (canvasHeight - imgHeight) / 2,
        imgWidth,
        imgHeight
      )
    }
  }
}
onMounted(() => {
  initCanvas()
})
</script>

<template>
  <div class="canvas-container">
    <canvas
      ref="canvasRef"
      id="canvas"
      :style="{
        width: `${canvasWidth}px`,
        height: `${canvasHeight}px`
      }"
    ></canvas>
  </div>
</template>

<style lang="scss" scoped>
.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid;
}
</style>

这样就成功实现了canvas绕中心点旋转 

实际上以此为延伸，可以实现计算canvas上绕任意点旋转，而不止是中心点

另外附上平移旋转图，重温一下三角函数知识

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const canvasRef = ref<HTMLCanvasElement>()
const ctx = ref<CanvasRenderingContext2D | null>()
const canvasWidth = 1000
const canvasHeight = 500
const rectWidth = 150
const rectHeight = 60
const deg = 60
const getRotateParams = (deg: number, width: number, height: number) => {
  const x =
    (width / 2) * Math.cos((Math.PI * deg) / 180) +
    (height / 2) * Math.sin((Math.PI * deg) / 180) -
    width / 2
  const y =
    (Math.cos((Math.PI * deg) / 180) * height) / 2 -
    (Math.sin((Math.PI * deg) / 180) * width) / 2 -
    height / 2
  return {
    x,
    y
  }
}
const initCanvas = () => {
  if (canvasRef.value) {
    canvasRef.value.width = canvasWidth
    canvasRef.value.height = canvasHeight

    ctx.value = canvasRef.value.getContext('2d')
  }
  if (ctx.value) {
    ctx.value?.translate(200, 200)
    ctx.value?.rect(0, 0, rectWidth, rectHeight)
    ctx.value?.stroke()
    ctx.value?.beginPath()
    ctx.value?.moveTo(-200, rectHeight / 2)
    ctx.value?.lineTo(canvasWidth + 200, rectHeight / 2)
    ctx.value?.stroke()
    ctx.value?.beginPath()
    ctx.value?.moveTo(rectWidth / 2, -200)
    ctx.value?.lineTo(rectWidth / 2, canvasHeight - 200)
    ctx.value?.stroke()
    ctx.value?.rotate((deg * Math.PI) / 180)
    ctx.value?.rect(0, 0, rectWidth, rectHeight)
    ctx.value?.stroke()
    ctx.value?.beginPath()
    ctx.value?.moveTo(-200, rectHeight / 2)
    ctx.value?.lineTo(canvasWidth + 200, rectHeight / 2)
    ctx.value?.stroke()
    ctx.value?.beginPath()
    ctx.value?.moveTo(rectWidth / 2, -200)
    ctx.value?.lineTo(rectWidth / 2, canvasHeight - 200)
    ctx.value?.stroke()
    ctx.value?.beginPath()
    ctx.value?.moveTo(0, -200)
    ctx.value?.lineTo(0, canvasHeight - 200)
    ctx.value?.stroke()

    const { x, y } = getRotateParams(deg, rectWidth, rectHeight)
    ctx.value?.translate(x, y)
    ctx.value?.rect(0, 0, rectWidth, rectHeight)
    ctx.value?.stroke()
    ctx.value?.beginPath()
    ctx.value?.moveTo(rectWidth / 2, -200)
    ctx.value?.lineTo(rectWidth / 2, canvasHeight - 200)
    ctx.value?.stroke()
    ctx.value?.beginPath()
    ctx.value?.moveTo(-200, rectHeight / 2)
    ctx.value?.lineTo(canvasWidth + 200, rectHeight / 2)
    ctx.value?.stroke();
    
    const img = document.createElement('img')
    img.src = '/car.png'
    img.onload = () => {
      // const imgAspectRatio = img.height / img.width
      // const imgWidth = 200
      // const imgHeight = imgWidth * imgAspectRatio
      // ctx.value?.drawImage(
      //   img,
      //   (canvasWidth - imgWidth) / 2,
      //   (canvasHeight - imgHeight) / 2,
      //   imgWidth,
      //   imgHeight
      // )
      // ctx.value?.rotate((deg * Math.PI) / 180)
      // const { x, y } = getRotateParams(deg, canvasWidth, canvasHeight)
      // ctx.value?.translate(x, y)
      // ctx.value?.drawImage(
      //   img,
      //   (canvasWidth - imgWidth) / 2,
      //   (canvasHeight - imgHeight) / 2,
      //   imgWidth,
      //   imgHeight
      // )
    }
  }
}
onMounted(() => {
  initCanvas()
})
</script>

<template>
  <div class="canvas-container">
    <canvas
      ref="canvasRef"
      id="canvas"
      :style="{
        width: `${canvasWidth}px`,
        height: `${canvasHeight}px`
      }"
    ></canvas>
  </div>
</template>

<style lang="scss" scoped>
.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid;
}
</style>

karl1966
关注
canvas 图像旋转与翻转姿势解锁
凹凸实验室
05-25 2702
多图预警，数学不好可直接跳至文末小结。需求背景从一个游戏需求说起：技术选型：canvas上图所展示的游戏场景，“可乐瓶”里有多个“气泡”，需要设置不同的动画效果，且涉及 deviceOrientation 的交互，需要有大量计算改变元素状态。从性能方面考虑，canvas 是不二的选择。技术点：canvas 绘制图像通过对游戏场景的进一步分析，可见场景中的“气泡”元素形状都是相同的，且不规则，通过 ...
canvas操作图片旋转组合
LiuXiaodong2020的博客
04-10 847
如果图片多或者其他滚动加载一类的可以明显提升性能，后续可以把视频也放进canvas播放。使用canvas对图片进行放大缩小，移动，旋转的操作。
canvas实现图片放大镜（缩放图像和反锯齿处理）
最新发布
xxx_holic123的博客
09-06 292
在drawImage方法中，通过缩放第二块画布的带下，实现图像的实时缩放显示，再利用画布环境的 imageSmoothingEnabled 属性，实现图像的反锯齿平滑。
canvas实现图片旋转
harmsworth的博客
06-23 3542
canvas实现图片旋转前言代码 前言 有一个需求，需要将图片旋转，旋转后正确的显示图片的位置（不能被其他元素遮住），等比例显示图片。 简单的实现如下： 您可以点击：图片旋转 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
canvas 实现图片旋转
yangqii的博客
12-22 1076
canvas重新绘制图片并实现旋转。
Canvas-图片旋转
diangengdan7347的博客
01-13 336
Canvas-图片旋转 众所周知canvas是位图，你可以在里面渲染你要的东西，不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西，例如我在canvas里添加一幅画，我现在想将那幅画移动10px，我们并不能直接操作那幅画，因为我们根本获取不到那幅画的任何信息。我们永远只能获取到的是canvas对象。 那问题来了，我要怎么旋转图片 其实canvas...
使用canvas把照片旋转任意角度
知之为知之，不知为不知
04-26 6208
使用canvas把照片旋转任意角度；conext.translate；context.rotate；context.drawImage；context.restore；修改canvas坐标系原点；
canvas图片旋转自适应容器宽度实践
12-12
本实践主要探讨的是如何使用Canvas实现图片的旋转，并在每次旋转90度后自动调整宽度以适应容器，保持等比缩放，确保图片不失真。 首先，我们需要在HTML中创建一个`<canvas>`元素，并设置其宽度和高度，以及关联一个...
canvas 图片旋转
06-13
可以使用 Canvas API 中的 `rotate()` 方法来旋转图片。下面是一个简单的例子： ```html <canvas id="myCanvas"></canvas> ``` ```javascript const canvas = document.getElementById("myCanvas"); const ctx = ...
canvas 原位置旋转图片
08-25
在HTML5中，Canvas是一个非常强大的绘图工具，允许开发者在网页上绘制图形、图片以及进行复杂的...在实际应用中，你可以根据需求调整旋转角度，或者将这个函数封装成一个可复用的方法，用于处理不同的图片旋转场景。
canvas图片左右旋转效果
04-05
我们使用HTML5的canvas标签可对图片进行旋转操作，对于ie8版本以下不支持HTML5的浏览器，可使用IE特有的滤镜效果来实现... 更详细canvas图片左右旋转效果教程，http://www.sucaihuo.com/js/27.html。你也可以在素材火网页特效下载 http://www.sucaihuo.com/js，很多资源真的不错，最主要是既有教程，也有演示并且可下载哦！~
canvas围绕旋转
01-14
使用convas库实现围绕旋转
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
08-17
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
小程序图片剪裁加旋转的示例代码
12-08
总结来说，这个小程序图片剪裁加旋转的示例代码利用了view和canvas的结合，通过监听手势事件，实现了流畅的图片操作体验，同时解决了图片质量与性能优化的问题。这种方法在微信小程序开发中提供了一种高效且实用的...
Canvas 画布的旋转
Dominic_W的博客
04-16 1743
这个方法是又Canvas的context提供的，它接收一个参数，这个参数指的是当前绘图顺时针旋转的角度，如上面代码所示，rotate方法的参数是“Math.PI / 6”，所以绘图应该会沿顺时针方向旋转30度。首选，我定义了一个1000*1000的正方形画布，然后在画布上绘制了两条交叉的分割线，用来定位整个画布的中心点，也是我希望围绕着旋转的中心点。上图就是最终渲染出来的效果，这是目前我想到的一种解决办法，还是感觉有点不太满意，大家有比较好的解决办法吗？如果希望绘图按照逆时针方向旋转呢？
canvas图片旋转，图片base64编码，保存图片
芝芝为荔枝
06-04 3778
canvas图片旋转，图片base64编码，保存图片
canvas旋转图片
a8725585的博客
12-08 7551
最终想要的结果 1、移动画布中心点 ctx.translate(x,y);//设置画布上的(0,0)位置，也就是旋转的中心点 此时旋转画布，会以（x,y）为中心点 3、所以我们需要将图片中心点也转移到（x,y） ctx.drawImage(img,-img.width/2,-img.height/2);//把图片绘制在旋转的中心点， 4、旋转角度 ctx.rotate(90*Math....
纯样式或使用JS的canvas实现图片旋转
商务合作 / 项目定制开发 / 前端一对一培训、答疑
06-20 3254
原理大致是，将img图片转为canvas对象，输出新的图片路径，回显到img标签中。点击旋转，图片也跟着旋转。共有4个方向，分别是0，90，180，270度。实际情况也是可以旋转的，简单方便，只适用于临时查看。祝你能成为一名优秀的WEB前端开发工程师！如果是按照我的思路，那自然就是使用。以上在vue项目中使用无任何问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值