canvas中图形的位移、旋转、缩放

最新推荐文章于 2023-08-25 11:00:26 发布

转载最新推荐文章于 2023-08-25 11:00:26 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gf36500/p/6878299.html

文章标签：

#javascript #ViewUI

本文通过一个HTML5 Canvas绘制矩形的例子介绍了如何使用translate、rotate和scale等变换方法来改变图形的位置、方向和大小。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript">
   onload=function(){
       var c=document.getElementById("mycanvas");
       c.width=500;
       c.height=500;
       var ctx=c.getContext("2d");
       ctx.fillStyle="#ff0000";
       //移动：横、竖位移
       ctx.translate(100,90);
       //旋转
       ctx.rotate(90*Math.PI/180);//围绕(0,0)起始点开始的
       //缩放
       ctx.scale(0.5,3);

       ctx.rect(0,0,350,150);
       ctx.fill();
   }
</script>
</head>
<body>
   <canvas id="mycanvas"></canvas>
</body>
</html>