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. nginx 红黑树详解

    1 介绍 这部分终于整理完了,太耗时间了,留下来备忘吧! 之前看STL源码时,只是研究了红黑树的插入部分.在stl源码剖析的书中,也没有涉及到删除操作的分析,这次对删除操作也进行了详细的研究, 并且还 ...

  2. CentOS 7 x64 docker 使用点滴

    CentOS 7 安装 docker yum search docker  查看是否 有docker包 yum info docker  版本为1.3.2 yum -y install docker ...

  3. (简单) POJ 3169 Layout，差分约束+SPFA。

    Description Like everyone else, cows like to stand close to their friends when queuing for feed. FJ ...

  4. [SQLite]SQL语法

    SQLite常用SQL语句 创建表格 sql="CREATE TABLE IF NOT EXISTS MusicList (id integer primary key AutoIncrem ...

  5. mysql迁移-----拷贝mysql目录/load data/mysqldump/into outfile

    摘要:本文简单介绍了mysql的三种备份,并解答了有一些实际备份中会遇到的问题.备份恢复有三种(除了用从库做备份之外), 直接拷贝文件,load data 和 mysqldump命令.少量数据使用my ...

  6. Sping--life cycle

    bean.xml: 注意, 千万不要后面加上 scope="prototype" <?xml version="1.0" encoding="U ...

  7. ZOJ 3930 Dice Notation

    简单模拟题.一个int写成了char,搞了4个多小时.真垃圾.. #include<stdio.h> #include<string.h> +],s[+]; +]; +]; i ...

  8. isKindOfClass,isMemberOfClass使用备忘

    isMemberOfClass 判断是否是属于这类的实例isKindOfClass 判断是否是这个类或者这个类的子类的实例 if ([teacher isKindOfClass:[Teacher cl ...

  9. java实现——006重建二叉树

    public class T006 { public static void main(String[] args){ int pre[] = {1,2,4,7,3,5,6,8}; int in[] ...

  10. 微信小程序之----加载中提示框loading

    loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...