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. shell命令前后端切换和暂停

    Shell支持作用控制,有以下命令: 1. command& 让进程在后台运行 2. jobs 查看后台运行的进程编号 3 ctrl+z 然程序进入后台并且暂停 3. fg %n 让后台运行的 ...

  2. Cocos2d-x V2.x -- 开发进阶和高级实例教程(一) 转

    第一章 如何在多平台新建Cocos2d-x项目 yangyong2014-06-25 15:04:44848 次阅读 原文链接:   http://cn.cocos2d-x.org/tutorial/ ...

  3. Trim(',')的作用去除最有一个','

    public bool XMLDataImport()        { List<string> sqllist = new List<string>();          ...

  4. ios 中在容器中移除单个控件的两个方法Subview

    我们知道[parentView removeFromSuperView];  会把全部的view都移除.以下我们可以通过给subView设一个tag,然后遍历所有的subView,找到目标subVie ...

  5. CodeForces 660D Number of Parallelograms

    枚举两点,确定一条线段,计算每条线段的中点坐标. 按线段中点坐标排个序.找出每一种坐标有几个. 假设第x种坐标有y个,那么这些线段可以组成y*(y-1)/2种平行四边形. 累加即可. #include ...

  6. POJ 1015 Jury Compromise

    感觉此题略难...... 背包问题.据说有一种二维DP的写法是错的.亲测,背包做法无误. dp[i][j][k]表示前i个物品,选择j个,差值为k的情况下获得的最大总和 dp[i][j][k]=max ...

  7. Oracle GoldenGate 异构平台同步（Mysql到Oracle）

    一.OGG安装配置(源端) 1.OGG下载 http://www.oracle.com/technetwork/cn/middleware/goldengate/downloads/index.htm ...

  8. 编译时.test文件报错无法解决的方法,关闭test编译

    有几次遇到从网上下载到的iOS开源代码编译报错,报错位置为Test Target的源文件,我就挺奇怪我又没做测试为啥会编译Test Target的源文件,之前的暴力解决方法是把Test Target直 ...

  9. 【转】15款Java程序员必备的开发工具

    如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同的观点:一种认为Java是最简单功能 ...

  10. MAC上更攺jenkins默认安装目录

    /Library/LaunchDaemons #编缉里面的jenkinshome和username sudo vim org.jenkins-ci.plist #然后 sudo launchctl u ...