canvas教程

HTML5 Canvas 教程 2.2.3 旋转

字号+ 作者:H5之家 来源:H5之家 2015-09-14 14:13 我要评论( )

英文原版: 2.2.3 旋转 旋转canvas用的方法是 rotate() 。此方法接受一个以弧度为单位的旋转参数,整个canvas将以坐标原点,也就是由 translate() 所确定的原点为圆心进行旋转。.在本教程中,我们将原点移动到了canvas的中心点上,这样图中的矩形就可以以其

英文原版:
2.2.3 旋转
旋转canvas用的方法是 rotate() 。此方法接受一个以弧度为单位的旋转参数,整个canvas将以坐标原点,也就是由 translate() 所确定的原点为圆心进行旋转。.在本教程中,我们将原点移动到了canvas的中心点上,这样图中的矩形就可以以其中心点进行旋转了。
如:

<script> context.script>

效果图,scale被注释掉的效果


效果图,scale没有注释掉的效果


代码

head> <style> body { margin: 0px; padding: 0px; } #myCanvas { borderstyle> <script> window.canvas context rectWidth rectHeight   // 把坐标原点移动到canvas中心点 context.canvas.  // 顺时针旋转45度 context..  context.context.rectWidth rectHeight rectWidth  bodywidthcanvashtml>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • fd详细教程|Excel_VBA_详细教程

    fd详细教程|Excel_VBA_详细教程

    2017-05-02 18:01

  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • SketchBook 2014 基础入门视频教程

    SketchBook 2014 基础入门视频教程

    2017-05-01 11:00

网友点评