HTML5 Canvas中的transform方法 50
<!DOCTYPEhtml><html><body><canvasid="myCanvas"width="300"height="150"style="border:1p...
<!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)了，这是怎么变换的，求大神解答。 展开
<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)了，这是怎么变换的，求大神解答。 展开
1个回答
展开全部
主要思想：首先要准备一张有连续帧的图片，然后利用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
追问
我小白，看不懂。有办法说得让我明白吗？
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
