Canvas 绘制一个指定的旋转图形(rotate())

原创 2018年04月15日 14:44:43


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的矩形(旋转45度)。

        // 这样会有问题,
        // 因为旋转的中心是坐标轴的0,0点,
        // 如果能够让旋转的中心是图形的中心,
        // 那么就可以完成旋转图形的绘制。
        /* ctx.rotate( Math.PI / 180 * 45 );
        ctx.fillRect( 100, 100, 50, 50 );*/

        /*
        * 绘制一个旋转图形的步骤:
        * 1、先平移坐标轴到图形的中心
        * 2、旋转坐标轴
        * 3、绘制图形( 需要注意,平移旋转之后,坐标体系变化,不能按照之前定好的坐标来绘制旋转图形 )
        * */

        // 正常情况下的参考矩形
        ctx.fillStyle = 'pink';
        ctx.fillRect( 100, 100, 50, 50 );

        // 平移到矩形的中心
        ctx.translate( 125, 125 );
        // 旋转坐标系
        ctx.rotate( Math.PI / 180 * 45 );
        // 绘制图形
        ctx.fillStyle = 'blue';
        ctx.fillRect( -25, -25, 50, 50 );  //旋转一般让图形中心画在坐标轴原点上。(旋转会绕着图形中心旋转)
    </script>
</body>
</html>


Canvas 绘制一个指定的旋转图形(rotate())

demo.html:&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt...
  • houyanhua1
  • houyanhua1
  • 2018-04-15 14:44:43
  • 15

Python图形GUI工具包tkinter如何调整元件在窗口中的位置几何布局管理

Tkinter中的GUI总是有一个root窗口,不管你是主动或者别动获得.主窗口就是你的程序开始运行的时候创建的,在主窗口中你通常是放置了你主要的部件.另外,Tkinter脚本可以依据需要创建很多独立...
  • u013040887
  • u013040887
  • 2017-12-16 10:15:49
  • 23

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

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

在canvas里绘制多个图像并且旋转图像

$(function() { var $my_canvas=$("#myCanvas"); var my_canvas=$my_canvas[0]; v...
  • u013285483
  • u013285483
  • 2016-08-02 15:48:16
  • 5331

Canvas 旋转动画(rotate())

demo.html:&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt...
  • houyanhua1
  • houyanhua1
  • 2018-04-15 14:46:16
  • 15

python第十一课——图形界面载入gif图片并用按钮切换

from Tkinter import *def Get():        inp=ent.get()                pic=PhotoImage(file = inp)      ...
  • magicbreaker
  • magicbreaker
  • 2008-01-19 18:52:00
  • 2284

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

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

Android中canvas rotate中心点问题图解

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

python打开网络图片并缩放

[python] view plain copy # -*- coding:utf-8 -*-   ''''' tk_image_view_url_io_resize....
  • yangdashi888
  • yangdashi888
  • 2017-06-16 10:15:08
  • 511

Python模块篇

 Python模块篇整理:Jims of 肥肥世家 jims.yang@gmail.com>Copyright © 2004,2005,2006 本文遵从GNU 的自由文档许可证(Free Docum...
  • forcal
  • forcal
  • 2008-12-15 04:06:00
  • 659
收藏助手
不良信息举报
您举报文章:Canvas 绘制一个指定的旋转图形(rotate())
举报原因:
原因补充:

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