Canvas 旋转(rotate())

原创 2018年04月15日 14:09:53


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');

        /*
        * 旋转坐标轴:
        * ctx.rotate( 旋转的弧度 )  (弧度:2*Math.PI表示一周)
        * 注意:已绘制的图形不会受到影响;旋转会累加(在之前旋转、平移、缩放的基础上再旋转)。
        * */


        ctx.translate( 100, 100 );
        ctx.fillRect( 0, 0, 50, 50 );

        // 旋转坐标轴,再按照同样的坐标绘制填充矩形
        ctx.rotate( Math.PI / 6 );  //旋转不会影响已经画好的图形。
        ctx.fillStyle = 'pink';
        ctx.fillRect( 0, 0, 50, 50 );

        // 旋转坐标轴,再按照同样的坐标绘制填充矩形
        ctx.rotate( Math.PI / 6 );  //旋转是在之前旋转、平移、缩放的基础上再旋转(旋转会叠加)
        ctx.fillStyle = 'yellow';
        ctx.fillRect( 0, 0, 50, 50 );
    </script>
</body>
</html>


canvas rotate()画布的旋转详解

刚才还是风和日丽的天,这没一会会就乌云密布了,雨呀,眼瞅就下来了呢,一场秋雨一场寒,感觉懂得要穿棉袄了的节奏 10月1号之前,还是T恤呢,10月放完国庆节和中秋节以后就开始毛衣、毛衫、毛外套了,这真...
  • dayewandou
  • dayewandou
  • 2017-10-14 18:30:39
  • 1259

Android中canvas rotate中心点问题图解

第一步平移: canvas.translate(200, 100); 第二步旋转90度 (注意:x 和 y 坐标会一同旋转) ...
  • iasxk
  • iasxk
  • 2013-12-19 10:57:12
  • 11164

CSS3图片旋转功能transform:rotate以及Canvas旋转示例

CSS3旋转图片 .demo { width: 100px; height: 75px; backgr...
  • smartsmile2012
  • smartsmile2012
  • 2017-03-28 13:56:00
  • 1647

Android图形graphics--Canvas的save,restore,rotate的理解

在View的onDraw方法中,通常在执行Canvas的translate,scale,rotate,skew,concat,或者clipRect等方法时会先调用Canvas的save方法,用于保存c...
  • yinzhijiezhan
  • yinzhijiezhan
  • 2016-04-03 18:38:30
  • 704

canvas绘图 -实现图片围绕中心点旋转

今天想要学习制作一个抽奖的转盘,想用canvas来绘制转盘,于是重新学习了一下canvas. 1、canvas的使用 要使用元素,必须先设置其width和height属性,制定额可以绘图的区域大小...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016-02-24 16:52:35
  • 17008

android绘图canvas的sava、restore、rotate以及若干问题,canvas绘图的理解

不知道是我的理解能力有问题还是怎么回事,网上有很多举例说明的,我都看不懂,理解不能,而楼下还有很多的人说一目了然浅显易懂。纠结了N久,决定自己来理解一番,做个记录。         所有的操作都是...
  • dinko321
  • dinko321
  • 2012-06-20 12:27:39
  • 30979

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

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

利用canvas.save()、canvas.restore()、canvas.translate()、canvas.rotate()绘制一个时钟表盘

Android绘制坐标系,原点在屏幕左上角,向右为x轴正方向,向下为y轴正方向。canvas.save(); 这个方法作用是将已经绘制的图像保存起来,让后续的操作就好像在一个新图层上操作一样。 can...
  • mouse12138
  • mouse12138
  • 2016-04-26 15:25:07
  • 2165

Canvas改变原点绕中心旋转

Canvas改变原点绕中心旋转
  • Wangdanting123
  • Wangdanting123
  • 2016-07-02 15:32:53
  • 3068

Canvas之translate、scale、rotate、skew方法讲解!

前面说Canvas大致可以分为三类: 1. save、restore 等与层的保存和回滚相关的方法; 2. scale、rotate、clipXXX 等对画布进行操作的方法; 3. drawXXX 等...
  • tianjian4592
  • tianjian4592
  • 2015-05-07 13:49:06
  • 32204
收藏助手
不良信息举报
您举报文章:Canvas 旋转(rotate())
举报原因:
原因补充:

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