Javascript 如何在画布中旋转对象

我尝试只旋转画布中的一个对象，而不是整个画布

我的代码如下：

var canvas=document.getElementById'canvas'； var buttons=document.getElementById'buttons'； var img=document.getElementById'photo'； var ctx=canvas.getContext'2d'； var rect={}； var-drag=false； 显示的var按钮=错误； var角=10； var旋转角度=0； var original_source=img.src； img.src=原始源； 函数初始化{ img.addEventListener'load'，函数{ canvas.width=img.width； canvas.height=img.height； canvas.addEventListener'mousedown'，mousedown，false； canvas.addEventListener'mouseup'，mouseup，false； canvas.addEventListener'mousemove'，mousemove，false； document.addEventListenerkeydown，keyDownPressed，false； }; } 功能键向下按{ var-keyCode=e.keyCode； var左箭头=37； var右箭头=39； var向上箭头=38； var向下箭头=40； ifkeyCode==左箭头{ 自转 } ifkeyCode==右箭头{ 旋转右 } } 函数mouseDowne{ rect.startX=e.offsetX； rect.startY=e.offsetY； 阻力=真； 显示的按钮=错误； buttons.classList.addhide； } 函数mouseUp{drag=false；按钮显示=true；} 函数onRemoveSelectionClicke{ ctx.clearRect0，0，canvas.width，canvas.height； 阻力=假； 显示的按钮=错误； buttons.classList.addhide； } 函数onRotateLeft{ 旋转角度=旋转角度-角度； canvas.style.transform='rotate'+rotate_angle+'deg'； } 旋转权函数{ 旋转角度=旋转角度+角度； canvas.style.transform='rotate'+rotate_angle+'deg'； } 函数mousemove{ 如果拖动{ ctx.clearRect0，0，canvas.width，canvas.height； rect.w=e.pageX-this.offsetLeft-rect.startX； rect.h=e.pageY-this.offsetTop-rect.startY； ctx.shadowBlur=5； ctx.filter='blur10px'； ctx.fillrect.startX、rect.startY、rect.w、rect.h； ctx.strokeRectrect.startX、rect.startY、rect.w、rect.h； }否则{ 如果显示按钮&&buttons.classList.containshide{ buttons.classList.removehide； } } } // 初始化； .隐藏{ 显示：无！重要； } 帆布{ 位置：绝对位置； 左：0； 右：0； 排名：0； 底部：0； 显示：内联块； 背景颜色：黄色； } 向左旋转 右转 删除所选内容

---

您需要为对象使用单独的画布；在这个单独的画布上绘制对象，然后，根据您实际打算执行的操作，您可以：

使用context.rotate结合context.drawImage在主画布上绘制辅助画布的内容； 使用CSS将一个画布覆盖在另一个画布上。 同样，也许您可以使用context.rotate，然后在主画布上绘制，如所述：

使用画布变换而不是CSS变换。 渲染矩形时，需要在画布中应用变换

该代码段是代码的副本，但有一些更改

渲染通过requestAnimationFrame完成，以便在鼠标移动时不会进行不必要的渲染

每当需要更新画布时，全局标志更新将设置为true

矩形数组用于存储每个矩形

矩形对象还存储其旋转rect.rotate，以便每个矩形具有独立的旋转

全局变量rect保存当前矩形

事件更改全局rect对象并设置update=true标志，它们不进行任何渲染

矩形围绕其中心旋转

画布上下文ctx.rotate使用弧度而不是度数

有关更多信息，请参阅代码

var canvas=document.getElementById'canvas'； var buttons=document.getElementById'buttons'； var img=document.getElementById'photo'； var ctx=canvas.getContext'2d'； var rect={}； var-drag=false； 显示的var按钮=错误； 变量角度=10*Math.PI/180； var旋转角度=0； var update=true；//当true更新画布时 var original_source=img.src； img.src=原始源； 函数初始化{ img.addEventListener'load'，函数{ canvas.width=img.width； canvas.height=img.height； canvas.addEventListener'mousedown'，mousedown，false； canvas.addEventListener'mouseup'，mouseup，false； canvas.addEventListener'mousemove'，mousemove，false； document.addEventListenerkeydown，keyDownPressed，false； }; //启动渲染循环 requestAnimationFrameupdateCanvas； } //仅当更新为true时，主渲染循环才会更新 函数updateCanvas{ ifupdate{ 帆布； 更新=假； } requestAnimationFrameupdateCanvas； } //矩形阵列 常量矩形=[]； //添加一个矩形 函数addRectanglerect{ 矩形。pushrect； } //画一个长方形 h旋转 函数DrawRect{ ctx.setTransform1,0,0,1，rect.startX+rect.w/2，rect.startY+rect.h/2； ctx.rotation.rotate； ctx.beginPath； ctx.rect-rect.w/2，-rect.h/2，rect.w，rect.h； ctx.fill； ctx.stroke； } //清除画布集过滤器并绘制矩形 功能绘图画布{ //恢复默认变换，因为矩形渲染不会恢复变换。 ctx.setTransform1,0,0,1,0,0； ctx.clearRect0，0，canvas.width，canvas.height； ctx.shadowBlur=5； ctx.filter='blur10px'； 矩形； } 功能键向下按{ var-keyCode=e.keyCode； var左箭头=37； var右箭头=39； var向上箭头=38； var向下箭头=40； ifkeyCode==左箭头{ 自转 } ifkeyCode==右箭头{ 旋转右 } } //创建新的rect添加到数组 函数mouseDowne{ 矩形={ startX:e.offsetX， 斯塔蒂：e.offsetY， w:1， h:1， 旋转：0， }; 阻力=真； 显示的按钮=错误； buttons.classList.addhide； addRectanglerect； 更新=真； } 函数mouseUp{drag=false；按钮显示=true；更新=true；} //删除顶部矩形并将“下一个”设置为当前，如果没有，则隐藏控件 函数onRemoveSelectionClicke{ 矩形.pop； ifrectangles.length==0{ 阻力=假； 显示的按钮=错误； buttons.classList.addhide； }否则{ 矩形=矩形[矩形.长度-1]； } 更新=真； } //旋转当前矩形 函数onRotateLeft{ 矩形旋转-=角度； 更新=真； } 旋转权函数{ 矩形旋转+=角度； 更新=真； } 函数mousemove{ 如果拖动{ rect.w=e.pageX-this.offsetLeft-rect.startX； rect.h=e.pageY-this.offsetTop-rect.startY； 更新=真； }否则{ 如果显示按钮&&buttons.classList.containshide{ buttons.classList.removehide； } } } // 初始化； .隐藏{ 显示：无！重要； } 帆布{ 位置：绝对位置； 左：0； 右：0； 排名：0； 底部：0； 显示：内联块； 背景颜色：黄色； } 向左旋转 右转 删除所选内容

---

你真是个天才。非常感谢。