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. photo中的图文混排

    photoshop中无法象word中自动图文混排,但可以通过手工绘制路径完成图文混排. 如下图,先摆放图像,然后绘制路径,然后在路径中输入或粘贴文字即可.

  2. LintCode 11 二叉查找树的搜索区间

    题目链接:http://www.lintcode.com/zh-cn/problem/search-range-in-binary-search-tree/ 1.描述 给定两个值 k1 和 k2(k1 ...

  3. DNS原理及其解析过程

    网络通讯大部分是基于TCP/IP的,而TCP/IP是基于IP地址的,所以计算机在网络上进行通讯时只能识别如“202.96.134.133” 之类的IP地址,而不能认识域名.我们无法记住10个以上IP地 ...

  4. 卷积神经网络（CNN）新手指南　1

    http://blog.csdn.net/real_myth/article/details/52273930 卷积神经网络(CNN)新手指南 2016-07-29 18:22 Blake 1条评论 ...

  5. [iOS]C语言技术视频-02-程序分支结构(if...else)

    下载地址: 链接: http://pan.baidu.com/s/1dREc2 密码: egbt

  6. bzoj1562【Noi2009】变换序列

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=1562 给一个序列Di表示min(|i-Ti|,n-|i-Ti|),求一个字典序最小的序列Ti ...

  7. python------unicode字符串转换为其他类型

    问题描述: 一下字符串转换为json类型 {u'src': u'crawl', u'cid': u'Ctengbangguoji', u'datatype': u'ItemBase', u'times ...

  8. 五、Hive

    一.Hive 1.1 Hive简介 1.2 Hive说明 1.3Hive的体系架构 来自为知笔记(Wiz)

  9. EF 实体字段设置主键和自增

    [Key] //主键 [DatabaseGenerated(DatabaseGeneratedOption.Identity)] //设置自增 public int id { get; set; } ...

  10. c#第5章 变量的更多内容 隐式和显式转换、枚举、结构、数组、

    1.目标数据 destination 英[ˌdestɪˈneɪʃn] 美[ˌdɛstəˈneʃən] n. 目的,目标; 目的地,终点; [罕用语] 预定,指定; 2.源数据 source 英[sɔ: ...