请帮忙看看 html5 canvas 如何做到文字旋转？我的代码出不来旋转。。
<!DOCTYPEHTML><html><body><canvasid="canvas"width="600"height="400"style="border:1pxs...
<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="600"height="400" style="border:1px solid black">
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<script type="text/javascript">
var canvas =document.getElementById("canvas");
var c =canvas.getContext("2d");
c.beginPath();
c.fillStyle = '#000000';
c.font = 'bold 16px verdana';
c.save();
c.fillText("文字1",200,200);
c.rotate(30);
c.restore();
c.fillText("文字2",200,300);
</script>
</body>
</html> 展开
<html>
<body>
<canvas id="canvas" width="600"height="400" style="border:1px solid black">
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<script type="text/javascript">
var canvas =document.getElementById("canvas");
var c =canvas.getContext("2d");
c.beginPath();
c.fillStyle = '#000000';
c.font = 'bold 16px verdana';
c.save();
c.fillText("文字1",200,200);
c.rotate(30);
c.restore();
c.fillText("文字2",200,300);
</script>
</body>
</html> 展开
1个回答
展开全部
首先：save是保存当前状态，restore是返回上一次保存的状态。
你画出"文字1"，后旋转，后返回（相当于没有旋转），最后才画"文字2"，所以两次文字都不旋转。
其次：rotate()的参数不是角度制，而是弧度制（Maht.PI相当于180度）。
所以要旋转30角度必须这样写c.rotate(Math.PI/6);
再次：旋转之后的方向都发生了改变。
就是说如果你先在x=200,y=200的地方画了东西，然后旋转30度，然后在x=200,y=200的地方画了另一个东西，这两个东西将不在同一个地方。（可以想象画画得人绕着坐标原点旋转了30度，而画布位置没变）
最后：附上能看见效果的代码。
<!DOCTYPE HTML>
<html>
<head><title>canvas</title><meta charset="utf-8" /></head>
<body>
<canvas id="canvas" width="600"height="400" style="border:1px solid black">
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<script type="text/javascript">
var canvas =document.getElementById("canvas");
var c =canvas.getContext("2d");
c.fillStyle = '#000000';
c.font = 'bold 16px verdana';
c.fillText("文字1",200,30);
c.save();
c.rotate(Math.PI/6);
c.fillText("文字2",200,30);
c.restore();
</script>
</body>
</html>
你画出"文字1"，后旋转，后返回（相当于没有旋转），最后才画"文字2"，所以两次文字都不旋转。
其次：rotate()的参数不是角度制，而是弧度制（Maht.PI相当于180度）。
所以要旋转30角度必须这样写c.rotate(Math.PI/6);
再次：旋转之后的方向都发生了改变。
就是说如果你先在x=200,y=200的地方画了东西，然后旋转30度，然后在x=200,y=200的地方画了另一个东西，这两个东西将不在同一个地方。（可以想象画画得人绕着坐标原点旋转了30度，而画布位置没变）
最后：附上能看见效果的代码。
<!DOCTYPE HTML>
<html>
<head><title>canvas</title><meta charset="utf-8" /></head>
<body>
<canvas id="canvas" width="600"height="400" style="border:1px solid black">
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<script type="text/javascript">
var canvas =document.getElementById("canvas");
var c =canvas.getContext("2d");
c.fillStyle = '#000000';
c.font = 'bold 16px verdana';
c.fillText("文字1",200,30);
c.save();
c.rotate(Math.PI/6);
c.fillText("文字2",200,30);
c.restore();
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
