`
murener
  • 浏览: 17097 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

html5 canvas如何以某个中心点旋转图片

阅读更多
var num=0;
function draw()
{
num+=1;
if(num==60)
num=1;
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.save();
//将坐标原点平移到当前图片所在的位置,width,height分别为图片的坐标,这个可以根据自己的需要进行更改
   cxt.translate(width,height);
//将坐标原点平移到要中心点,这里是以图片的底部为中心点进行旋转13,62为图片本身的中心点
    cxt.translate(13,62);
//每次旋转6度
    cxt.rotate(num*(Math.PI/30));
    cxt.translate(-13,-62);
//因为是以图片的底部作为中心点,所以这时候的图片位置在画布的原点上
    cxt.drawImage(aimg,0,0);
    cxt.restore();
}
分享到:
评论

相关推荐

    HTML5 canvas商品图片360度旋转浏览效果.zip

    JavaScript的`context.rotate()`方法用于围绕某个点(通常为原点,即canvas的中心点)旋转当前坐标轴,`context.translate()`则用于改变当前绘图位置。在每一帧动画中,我们会调整旋转角度,从而实现连续的旋转效果...

    圆形图片,旋转

    这个点称为旋转中心,可以通过`translate()`方法改变画布的原点到旋转中心,然后应用`rotate()`方法,最后再将原点恢复,实现图片的旋转。 对于动画效果,我们需要使用定时器(如JavaScript的`...

    PC端 四个角可控制,实现图片拖动,旋转,放大,拉伸(完美)

    在HTML5的Canvas中,可以使用`context.rotate()`方法来旋转图形。用户点击图片的某个角后,可以通过计算角度并应用旋转操作。角度可以通过鼠标的相对位置和初始角度计算得出。在CSS中,可以使用`transform: rotate...

    Jquery模仿相机

    5. **用户体验**:为了提高用户的真实感,开发者可能会使用CSS3的`transform`和`transition`属性来增强视觉效果,比如平滑的过渡动画和3D旋转等。 6. **响应式设计**:考虑到不同设备的屏幕尺寸和触控方式,该实例...

    头像裁剪保存到后台

    5. **异步上传**:前端通常使用`XMLHttpRequest`或`fetch` API进行异步上传,将裁剪压缩后的图片数据以`FormData`形式发送到服务器。在发送前,可以设置合适的请求头(如`Content-Type`),以确保后端能够正确解析。...

Global site tag (gtag.js) - Google Analytics