1. <canvas id="canvas" width="600" height="500" style="background-color: yellow;"></canvas>
  1. var canvas=document.getElementById("canvas");
  2. var cxt=canvas.getContext('2d');
  3. cxt.lineWidth=10;
  4. cxt.beginPath();
  5. cxt.moveTo(20,20);
  6. cxt.lineTo(180,20)
  7. cxt.stroke();
  8. cxt.closePath();
  9.  
  10. //设置异次元空间
  11. cxt.save();
  12. //异次元空间 重置原点,默认是画布的(0,0)点
  13. cxt.translate(20,20);
  14. //设置旋转角度 参数时弧度 角度0--360 弧度=角度*Math.PI/180
  15. cxt.rotate(-30*Math.PI/180);
  16. //旋转一个线段
  17. cxt.lineWidth=10;
  18. cxt.beginPath();
  19. cxt.moveTo(0,0);
  20. cxt.lineTo(20,180);
  21. cxt.stroke();
  22. cxt.closePath();
  23. //将旋转之后的元素返回原画布
  24. cxt.restore();

canvas之旋转一条线段的更多相关文章

  1. canvas之画一条线段

    var canvas=document.getElementById("canvas"); //设置绘图环境 var cxt=canvas.getContext('2d'); // ...

  2. Android 自定义圆形旋转进度条,仿微博头像加载效果

    微博 App 的用户头像有一个圆形旋转进度条的加载效果,看上去效果非常不错,如图所示: 据说 Instagram 也采用了这种效果.最近抽空研究了一下,最后实现的效果是这样: 基本上能模拟出个大概,代 ...

  3. html5 canvas绘制环形进度条,环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  4. Html5 Canvas动画旋转的小方块;

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

  5. (hdu step 7.1.2)You can Solve a Geometry Problem too(乞讨n条线段,相交两者之间的段数)

    称号: You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/ ...

  6. canvas绘制圆形进度条(或显示当前已浏览网页百分比)

    使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 ...

  7. 平面上给定n条线段,找出一个点,使这个点到这n条线段的距离和最小。

    题目:平面上给定n条线段,找出一个点,使这个点到这n条线段的距离和最小. 源码如下: #include <iostream> #include <string.h> #incl ...

  8. 根据多个点使用canvas贝赛尔曲线画一条平滑的曲线

    众所周知想用canvas画一条曲线我们可以使用这些函数: 二次曲线:quadraticCurveTo(cp1x, cp1y, x, y) 贝塞尔曲线:bezierCurveTo(cp1x, cp1y, ...

  9. Hdu 5862 Counting Intersections(有n条线段,每一条线段都是平行于x轴或者y轴,问有多少个交点+树状数组区间求和单点跟新)

    传送门:Hdu 5862 Counting Intersections 题意:有n条线段,每一条线段都是平行于x轴或者y轴,问有多少个交点 分析: 基本的操作流程是:先将所有的线段按照横树坐标x按小的 ...

随机推荐

  1. Python面向对象 --- 新旧式类、私有方法、类属性和类方法、静态方法

    一.Python面向对象中的新旧式类 1)新式类(推荐使用):在定义类时,类后边括号里要继承基类(object).在python3.x中若没有指定父类,会默认使用的是object作为基类:在pytho ...

  2. Shell 循环中实现展示进度百分比的脚本方法

    Shell 循环中实现展示进度百分比的脚本方法 当我需要处理一个几万行的文件的时候,需要处理的时间是比较长的.我一开始的想法是,没处理一行,就输出一个 # 号.但是这样还是会出现很多很多的 # 号,即 ...

  3. Andriod4.2 Camera 架构与实现

    1.Camera架构包括客户端和服务端,他们之间的通信采用Binder机制实现. Camera的实现主要包括本地代码和Java代码两个层次: Camera本地框架: frameworks/native ...

  4. iOS-Core Data 详解

    使用Core Data 框架 Core Data框架本质就是一个ORM(对象关系映射(英语:Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一 ...

  5. java 输入输出流 关于InputStream 和 OutputSteam 实现文本一行一行读入和 文本一行一行输出

    对  byte 有了新的认知:byte表示一个字节 因此他可以表示成 一个 数字: 一个数字可以映射成一个字符:InputStream 中的 read() 函数  的意思是读入一个整数,读入一个整数的 ...

  6. matlab 相关系数的计算

    1. 首先说说自相关和互相关的概念.     这 个是信号分析里的概念,他们分别表示的是两个时间序列之间和同一个时间序列在任意两个不同时刻的取值之间的相关程度,即互相关函数是描述随机信号 x(t),y ...

  7. JSP学习(五)JSP标签

    JSP标签 jsp的常用标签有: <jsp:include>标签 <jsp:forward>标签 <jsp:param>标签 <jsp:include> ...

  8. javaScript之函数(基础篇)

    函数定义 定义一: function a(x,y......){if(x>y){return x;}else{return y;}} 详细讲解:function是定义函数的关键字: a(x,y. ...

  9. 实用符号Alt+小键盘快输

    键盘输入:①Word.写字板.QQ2011等,Alt+Unicode之十进制数:②记事簿.网页框.浏览器之地址栏.TM2009等,Alt+GBK之十进制数. 字符 Unicode 十进制数 GBK ...

  10. Python3.x time模块

    python中,我们会用到很多和时间相关的操作.下面就来看看时间的模块的作用. 使用相应功能需要导入time模块 import time time模块方法: asctime(p_tuple=None) ...