Canvas rotate- 旋转

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>rotate</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    ctx.beginPath();

    ctx.strokeStyle = '#000000';

    ctx.strokeRect(200, 50, 100, 50);

    ctx.rotate(0.25 * Math.PI);

    ctx.beginPath();

    ctx.strokeStyle = '#ff0000';

    ctx.strokeRect(200, 50, 100, 50);

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>rotate</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    ctx.beginPath();

    ctx.strokeStyle = '#000000';

    ctx.strokeRect(200, 50, 100, 50);

    ctx.translate(250,75);

    ctx.rotate(0.25 * Math.PI);

    ctx.translate(-250,-75);

    ctx.beginPath();

    ctx.strokeStyle = '#ff0000';

    ctx.strokeRect(200, 50, 100, 50);

    ctx.arc(250,75,2,0,2*Math.PI,true);

    ctx.stroke();

    </script>

</body>

</html>

Canvas rotate- 旋转的更多相关文章

  1. Android canvas rotate():平移旋转坐标系至任意原点任意角度-------附：android反三角函数小结

    自然状态下,坐标系以屏幕左上角为原点,向右是x正轴,向下是y正轴.现在要使坐标系的原点平移至任一点O(x,y),且旋转a角度,如何实现? 交待下我的问题背景,已知屏幕上有两点p1和p2,构成直线l.我 ...

  2. Android开发之Canvas rotate方法释疑

    Canvas的rotate()函数本应该是很简单的一个函数,但是由于api手册言之不详,使用中难免有吃不准的地方.下面所记录的几点,都是我在使用中所迷惑过的问题,特此记录. 1,坐标原点在哪里? 如果 ...

  3. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. 拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  5. CSS3 skew倾斜、rotate旋转动画

    css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...

  6. Canvas rontate(旋转) 使用误区

    context.setTransform(1,0,0,1,0,0);//重置转换为初始化状态 var angleInRadians = 45 * Math.PI / 180;var width = 4 ...

  7. canvas绘制旋转图形

    将绘制到canvas上的要素进行旋转: 1.绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的 2.操作操作DOM元素,直接旋转canvas画布 操作画布的坐标轴状态: ...

  8. 测试canvas绘制旋转文字的性能

    canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...

  9. canvas之旋转一条线段

    <canvas id="canvas" width="600" height="500" style="background ...

  10. HTML5 Canvas 绘制旋转45度佛教万字

    效果如下: 代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Cont ...

随机推荐

  1. php 缓存之 APC 和apcu

    php opcode 缓存 apc. 其实,我自己的理解, php apc 缓存其实分两部分, 一部分是 缓存 类似于 java 编译的中间的 字节码, 不同于c 语言编译之后的二进制的机器码. ph ...

  2. CodeForces 616D Longest k-Good Segment

    用队列维护一下即可 #include<cstdio> #include<cstring> #include<queue> #include<algorithm ...

  3. Apriori算法第二篇----详细分析和代码实现

    1 Apriori介绍 Apriori算法使用频繁项集的先验知识,使用一种称作逐层搜索的迭代方法,k项集用于探索(k+1)项集.首先,通过扫描事务(交易)记录,找出所有的频繁1项集,该集合记做L1,然 ...

  4. Lua学习系列（四）

    lua 资源:http://www.dcc.ufrj.br/~fabiom/lua/ 第一个Lua程序 http://www.dcc.ufrj.br/~fabiom/lua/ 原文:https://w ...

  5. 关于集合set ---STL

    关于集合set的去重复,向集合中插入元素 #include<iostream>#include<set>using namespace std;int main(){ set& ...

  6. Java笔记——XML解析

    import java.io.File; import java.io.IOException; import javax.xml.parsers.DocumentBuilder; import ja ...

  7. (简单) FZU 2150 Fire Game ，Floyd。

    Problem Description Fat brother and Maze are playing a kind of special (hentai) game on an N*M board ...

  8. Memcache第一篇---基础教程

    Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力. 它可以应 ...

  9. ZOJ 3933 Team Formation

    费用流裸题......比赛的时候少写了一句话....导致增加了很多无用的边一直在TLE #include<cstdio> #include<cstring> #include& ...

  10. HDU 5650 so easy

    n不为1的时候输出a[1],否则输出0 #include<cstdio> #include<cstring> #include<cmath> #include< ...