`
murener
  • 浏览: 16825 次
  • 性别: 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 标签进行图片裁剪、旋转、缩放示例代码

    HTML5的canvas元素是网页开发中的一个强大工具,它提供了在浏览器端动态绘制图形的能力,包括图片处理。在这个示例中,我们将深入探讨如何利用canvas进行图片的裁剪、旋转和缩放操作。 首先,我们需要在HTML文件中...

    canvas 原位置旋转图片

    在HTML5中,Canvas是一个非常强大的绘图工具,允许开发者在网页上绘制图形、图片以及进行复杂的动画操作。本文将详细讲解如何在Canvas上实现原位置旋转图片,并通过`translate`和`rotate`两个关键方法来理解这一过程...

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

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

    html5 canvas文字标签云3D旋转动画特效.rar

    html5 canvas文字标签云3D旋转动画特效.rar html5 canvas文字标签云3D旋转动画特效.rar html5 canvas文字标签云3D旋转动画特效.rar html5 canvas文字标签云3D旋转动画特效.rar html5 canvas文字标签云3D旋转动画特效...

    html5 canvas页面滚动背景图片旋转动画特效

    要创建背景图片旋转动画,我们需要以下步骤: 1. 加载图片:使用`new Image()`创建一个图像对象,然后设置其`src`属性指向图片资源。添加`onload`事件监听器,确保图片加载完成后执行后续操作。 2. 绘制图片:在`...

    html5 canvas 图片压缩

    在"html5 canvas 图片压缩"这个主题中,我们将探讨如何利用Canvas来实现图片的压缩,并解决不同浏览器的兼容性问题,以及在微信等特定环境下图片旋转和压缩的解决方案。 首先,我们要理解Canvas的基本用法。在HTML...

    html5 canvas绘制3D地球旋转动画特效

    在这个“html5 canvas绘制3D地球旋转动画特效”中,我们将深入探讨如何利用HTML5 Canvas API来创建一个逼真的3D地球模型,并实现其旋转的动画效果。 首先,我们需要理解Canvas的基本用法。Canvas是一个矩形区域,在...

    HTML5 Canvas模拟3D地球旋转动画特效

    HTML5 Canvas技术是一种在网页上绘制图形的API,它允许开发者动态生成图像,而不依赖于预先存在的图片资源。在这个特定的案例中,“HTML5 Canvas模拟3D地球旋转动画特效”利用了Canvas的强大功能来创建一个逼真的3D...

    HTML5 Canvas三维立体的旋转物体动画

    总的来说,"HTML5 Canvas三维立体的旋转物体动画"涉及到的知识点包括:HTML5 Canvas API、向量运算、矩阵变换、透视投影、动画原理以及可能用到的3D图形库。掌握这些技术,开发者就能够创建出引人入胜的、具有真实感...

    canvas图片旋转自适应容器宽度实践

    本实践主要探讨的是如何使用Canvas实现图片的旋转,并在每次旋转90度后自动调整宽度以适应容器,保持等比缩放,确保图片不失真。 首先,我们需要在HTML中创建一个`<canvas>`元素,并设置其宽度和高度,以及关联一个...

    html5 canvas炫酷旋转银河系星空背景特效

    此外,`translate()`方法可能也被用于改变星系的中心点,从而产生更逼真的旋转视觉。 为了实现星空的动态感,开发者可能还使用了`requestAnimationFrame()`函数来平滑地更新动画帧。这个函数确保在浏览器准备好绘制...

    html5 canvas生成全景图片360度展示特效

    5. 刷新Canvas以显示新的视角。 文件`index.html`很可能是整个项目的入口,包含`<canvas>`元素和其他必要的HTML结构。`获取坐标.html`可能是一个辅助页面,用于测试和获取鼠标的坐标信息,这对于计算用户的旋转指令...

    HTML5 canvas纸片3D旋转动画.zip

    "HTML5 canvas纸片3D旋转动画"是一个利用canvas实现的交互式3D效果,通常用于创建引人入胜的网页视觉体验。在本示例中,我们将会探讨如何使用HTML5的canvas API来创建3D旋转和卷曲噪音动画。 首先,要理解HTML5 ...

    html2canvas将HTML内容写入Canvas生成图片 uniapp

    HTML2canvas是一个JavaScript库,它的主要功能是在浏览器环境中将HTML内容转换为Canvas图像,从而能够进一步将这些图像保存为图片格式,如JPEG、PNG等。这个工具在Web开发中非常实用,尤其对于需要在客户端生成屏幕...

    HTML5 Canvas核心技术源码技术代码

    HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...

    超炫酷HTML5 Canvas 3D旋转地球动画DEMO演示

    1、html5 2、地球旋转 3、canvas

    html5 canvas彩色碎片组合球形旋转动画特效

    这款“html5 canvas彩色碎片组合球形旋转动画特效”利用了Canvas API来实现一种动态视觉效果,使用户可以通过鼠标操作与之互动。 1. **HTML5 Canvas基本概念** HTML5 Canvas是一个基于矢量图形的画布,通过...

    html5 canvas飘洒的星星特效

    html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...

    html5 canvas炫酷的万花筒旋转动画特效

    通过学习和掌握这些知识点,你可以创建出各种令人惊叹的Canvas动画效果,包括这个"html5 canvas炫酷的万花筒旋转动画特效"。而具体的实现代码,可以通过解析压缩包中的`texiao1748_1560680780`文件来学习和参考。

Global site tag (gtag.js) - Google Analytics