HTML5 Canvas中的transform方法

答案:2 悬赏:0 手机版

解决时间 2021-03-22 16:35

提问者网友：风月客
2021-03-22 01:30

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//ctx.rotate(30*Math.PI/180);
ctx.fillRect(50,20,100,50);

</script>

</body>
</html>
如果注释ctx.rotate(30*Math.PI/180);，矩形顶点的坐标为(50,20)。但是取消注释后，矩形顶点的坐标却不是(50,20)了，这是怎么变换的，求大神解答。

最佳答案

五星知识达人网友：思契十里
2021-03-22 02:59

主要思想：首先要准备一张有连续帧的图片，然后利用HTML5Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。关键技术点：JavaScript函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，另外一个参数代表间隔时间，单位为毫秒数。代码示例：setTimeout(update,1000/30);Canvas的API-drawImage()方法，需要指定全部9个参数：ctx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height);其中offw,offh是指源图像的起始坐标点，width,height表示源图像的宽与高，x2,y2表示源图像在目标Canvas上的起始坐标点。CanvasMouseEventDemoHTMLCanvasAnimationsDemo-ByGloomyFishPlayAnimations

全部回答

1楼网友：北方的南先生
2021-03-22 03:41

额

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息