use*_*369 2 html javascript css canvas html5-canvas
一直在尝试用HTML工作,我还没有能够确定它.基本上,我想创建一个画布,然后在画布内部创建一个圆圈,从画布的边缘移动到画布的边缘.有什么建议？
编辑:
人们想要我到目前为止所拥有的东西,所以这里是:
<html>
<head>
<script type="text/javascript">
function draw () {
var canvas = document.getElementById('circle');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = "rgb(150,29,28)";
var startPoint = (Math.PI/180)*0;
var endPoint = (Math.PI/180)*360;
context.beginPath();
context.arc(200,200,150,startPoint,endPoint,true);
context.fill();
context.closePath();
}
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="500" height="500"></canvas><br>
</body>
</html>
我不太确定如何在画布上画一个圆圈(我对它的实现仍然很不满)以及如何制作它,你知道,移动.我有一些如何旋转东西的例子,但不是真的如何移动它.对于那些经验不足的人来说很抱歉,我试图自己学习HTML,但是我所得到的这本书在这方面似乎并不是真正的描述,即使它应该教我HTML.
所以到目前为止你有一个代码,你可以在某个位置画一个圆圈到画布表面,非常好,现在为了使它看起来像移动你必须一次又一次地画它它的位置略微改变,以给它一个平滑的动作效果,这是每秒画60次的标准(我认为这是因为每秒60帧是人眼可以注意到的最多,或者其他什么).当然,每次在另一个位置绘制时,都需要清除旧的绘图.
让我们稍微改变你的代码,以使其动画友好:
<script type="text/javascript">
function init()
{
canvas = document.getElementById('canvas');
if(canvas.getContext)
context = canvas.getContext('2d');
else return;
setInterval(draw, 1000 / 60); // 60 times per second
}
function draw()
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(150,29,28)";
// var startPoint = (Math.PI/180)*0; Kinda redundant, it's just 0
// var endPoint = (Math.PI/180)*360; Again, it's just PI times 2
context.beginPath();
context.arc(200, 200, 150, 0, Math.PI * 2, true);
context.fill();
context.closePath();
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="500" height="500"></canvas><br>
现在有很多有趣的方法可以使物体朝向固定点移动,但最简单的方法当然是沿直线移动.要做到这一点,你需要
让我们改变您的代码,以便我们掌握这些代码
var canvas, context,
position = {x: 200, y: 200},
target = {x: 400, y: 400};
function init()
{
...
}
function draw()
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(150,29,28)";
context.beginPath();
context.arc(position.x, position.y, 150, 0, Math.PI * 2, true);
context.fill();
context.closePath();
}
好!这样,无论何时更改position对象中的某个值,圆圈的位置都会受到影响.
如果从目标位置减去当前位置,您将获得另一个直接指向当前位置的目标位置的向量？因此,获取该向量并将其标准化,将其长度调为1,结果实际上是从目标到对象位置的角度(余弦,正弦).这意味着如果将标准化向量添加到对象的当前位置,对象将一次向目标位置1单位移动.
对矢量进行标准化只是将它的分量除以它的长度.
function normalize(v)
{
var length = Math.sqrt(v.x * v.x + v.y * v.y);
return {x: v.x / length, y: v.y / length};
}
var step = normalize({x: target.x - position.x, y: target.y - position.y});
好的,现在我们需要做的就是继续将step向量添加到对象的当前位置,直到它到达目标位置.
function normalize(v)
{
var length = Math.sqrt(v.x * v.x + v.y * v.y);
return {x: v.x / length, y: v.y / length};
}
var canvas, context,
position = {x: 200, y: 200},
target = {x: 400, y: 400},
step = normalize({x: target.x - position.x, y: target.y - position.y});
function init()
{
canvas = document.getElementById('canvas');
if(canvas.getContext)
context = canvas.getContext('2d');
else return;
setInterval(draw, 1000 / 60);
}
function draw()
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(150,29,28)";
context.beginPath();
context.arc(position.x, position.y, 150, 0, Math.PI * 2, true);
context.fill();
context.closePath();
position.x += step.x;
position.y += step.y;
}
你有它.当然这是非常基本的代码,你必须添加一个编码来检查对象是否已经到达目标,否则它将继续超过目标.如果移动速度太慢,只需按照step任意速度因子缩放矢量.同样在现实世界的应用程序中,你有很多对象,而不仅仅是一个圆圈所以你必须使它完全面向对象,因为每个对象都有它的位置,目标位置,颜色等等.使用矢量工作会派上用场.这是我前一段时间为自己写的:http://pastebin.com/Hdxg8dxn