39,087
社区成员
发帖
与我相关
我的任务
分享下面代码 canvas rotate旋转 旋转的坐标点在哪，为什么不在元素的中心点？
下面代码 canvas rotate旋转 旋转的坐标点在哪，为什么不在元素的中心点？
=================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
</style>
<script>
function init()
{
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.strokeStyle = "red";
cxt.strokeRect(300,300,100,100);
cxt.strokeStyle = "blue";
cxt.rotate(10*Math.PI/180);
cxt.strokeRect(300,300,100,100);
cxt.strokeStyle = "green";
cxt.rotate(20*Math.PI/180);
cxt.strokeRect(300,300,100,100);
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" style="border:1px solid red" width="1200" height="600"></canvas>
</body>
</html>
=================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
</style>
<script>
function init()
{
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.strokeStyle = "red";
cxt.strokeRect(300,300,100,100);
cxt.strokeStyle = "blue";
cxt.rotate(10*Math.PI/180);
cxt.strokeRect(300,300,100,100);
cxt.strokeStyle = "green";
cxt.rotate(20*Math.PI/180);
cxt.strokeRect(300,300,100,100);
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" style="border:1px solid red" width="1200" height="600"></canvas>
</body>
</html>
...全文
请发表友善的回复…
发表回复
