Canvas 旋转动画(rotate())

原创 2018年04月15日 14:46:16


demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        // 在100,100点绘制一个宽50,高50的旋转矩形。
        /*var baseRadian = 0;
        setInterval( function() {

            // 防止图形飞走,所以先把当前坐标轴的状态保存起来
            ctx.save();

            // 清除上一次的矩形
            ctx.clearRect( 0, 0, cvs.width, cvs.height );

            // 平移到矩形的中心
            ctx.translate( 125, 125 );

            // 旋转坐标系
            ctx.rotate( baseRadian += Math.PI / 180 * 4 );

            // 绘制图形
            ctx.fillRect( -25, -25, 50, 50 );

            // 平移旋转之后,回滚到最初的坐标轴状态
            ctx.restore();

        }, 50 );*/


        /*----------------------------做法2--------------------------------*/

        // 先统一平移到矩形的中心
        ctx.translate( 125, 125 );

        // 基于这个中心不断绘制旋转矩形
        setInterval( function() {

            // 清除上一次的矩形
            ctx.clearRect( -50, -50, cvs.width, cvs.height );

            // 旋转坐标系
            ctx.rotate( Math.PI / 180 * 4 );  //旋转叠加(在之前旋转的基础上再旋转)

            // 绘制图形
            ctx.fillRect( -25, -25, 50, 50 );

        }, 50 );
    </script>
</body>
</html>


利用canvas的rotate创建一个简易的风车动画

刚接触canvas的rotate属性,突发奇想能不能用它做个风车转动的效果,可是它旋转时却不是按照固定点旋转的,后来查阅了网上资料,网上说rotate旋转的不是图形,而是画布,于是我就想到将要旋转图形...
  • haibeimingsi
  • haibeimingsi
  • 2015-08-28 15:23:43
  • 1664

用canvas实现围绕旋转动画

使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针 代码demo链接地址 代码demo链接地址 html文件 ...
  • k491022087
  • k491022087
  • 2017-01-14 23:23:46
  • 1749

html5的canvas旋转动画

your browser does not support the canvas tag var deg = 0; var r = 30; var rl = 100;...
  • LanSeTianKong12
  • LanSeTianKong12
  • 2016-12-28 14:25:39
  • 803

Android旋转动画rotate动画,xml配置set实现

Android旋转动画rotate动画,xml配置set实现作为快速备忘查询,写到这里记下。在xml配置动画所需的set设置资源,然后上层Java代码以最少的代码实现一个匀速旋转的动画,这种开发场景在...
  • zhangphil
  • zhangphil
  • 2017-08-14 16:27:28
  • 1550

android RotateAnimation设置中心点旋转动画

在xml设置:
  • zhuhai__yizhi
  • zhuhai__yizhi
  • 2015-09-16 12:53:28
  • 11796

android:Canvas绘制自旋转Bitmap

需求 在SurfaceView或者普通View中,我们在每个绘制周期(onDraw)中,不仅需要更新绘制Bitmap对象在View中得位置,而且还希望Bitmap能够以它自身的中心点为圆心,进行自旋...
  • NUPTboyZHB
  • NUPTboyZHB
  • 2015-03-05 10:58:40
  • 4945

让旋转动画没有停顿

不要把rotate标签写在set标签里就行了
  • ithouse
  • ithouse
  • 2016-06-27 16:47:43
  • 1936

Android中如何使用rotate实现图片不停旋转的效果与动画的停止

本文主要介绍Android中如何使用rotate实现图片不停旋转的效果。Android 平台提供了两类动画,一类是 Tween 动画,即通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生动画效果...
  • dreamer0924
  • dreamer0924
  • 2013-11-21 09:50:48
  • 5795

Android Canvas中rotate()和translate()方法详解

Android Canvas中rotate()和translate()两个方法详解
  • zhangzhuowh
  • zhangzhuowh
  • 2015-10-18 19:45:47
  • 873

Android canvas rotate方法的理解

对canvas的理解
  • lzc_lzc_lzc
  • lzc_lzc_lzc
  • 2016-10-20 11:36:43
  • 1651
收藏助手
不良信息举报
您举报文章:Canvas 旋转动画(rotate())
举报原因:
原因补充:

(最多只允许输入30个字)