您的位置: 首页  >  文章  >  Canvas的旋转操作（十三）

Canvas的旋转操作（十三）

分类: 文章 • 2024-02-14 13:04:28

旋转函数
 

context.rotate(x)
参数x为旋转度，比如旋转45度，则x=Math.PI/4,使用弧度旋转制，注意，这里是以Canvas的原点为旋转点的！！！

下面我们就来试一下这个函数，我们想画一个中心点在（200,200），长宽均为100的正方形顺时针旋转45度的图形；

代码如下

<!DOCTYPE html>     <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en">    <!-- 网页页面的根，其他元素均放在其中，只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
  <meta charset="UTF-8">    <!-- 编码方式  -->
  <title>Canvas高速入门</title>   <!-- 页面设置名称，显示在浏览器标题栏中 -->
  <!-- CSS 及 javascript 代码放置处 -->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
  <script type="text/javascript">
    $(document).ready(function(){
      //alert("HELLO WORLD!!!")
      var canvas = $("#mycanvas");
      var context = canvas.get(0).getContext("2d");
      
      context.rotate(Math.PI/4);
      context.fillRect(150,150,100,100);
    });
  </script>
</head>
<body>  <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas"  style="background-color: #113344"></canvas>

</body>
</html>

效果图

Canvas的旋转操作（十三）

你会发现这不是你想要的！其实,同平移和缩放，这个旋转也是针对整个Canvas画布的，而且是以画布以原点顺时针旋转Math.PI/4的弧度，因此就出现上面的状况了！！！

Canvas的旋转操作（十三）

 

所以你如果只想旋转某个图形，单单上面的操作是不行的！！！所以下面就一代码来绘制我们想要的旋转图形！！！


我们想画一个中心点在（200,200），长宽均为100的正方形顺时针旋转45度的图形；

经计算，最后的图形的中心点在（200,200）,因此我们可以先平移原点，再旋转平移后的原点就可以轻松的得到我们想要的图形了！！！

代码如下：
 

context.translate(200,200);
context.rotate(Math.PI/4);
context.fillRect(-50,-50,100,100);

效果图：

Canvas的旋转操作（十三）

 

相关推荐