use*_*862 6 html javascript canvas
我的问题是context.beginPath()和context.closePath().下面的代码将在屏幕周围绘制一个圆弧,直到它消失,然后是一个小点,我会注释掉,因为它是一个我不知道如何包含的.jpg.
我的问题是beginPath()究竟做了什么以及closePath()做了什么？
如果我评论它们,除了我期待的结果之外,我得到了一个疯狂的结果.我看过互联网,但我还没有看到这样的结果.
代码有问题:
function drawTheBall() {
context.fillStyle = "#00AB0F"; //sets the color of the ball
context.beginPath();
context.arc(ball.x,ball.y,10,0,Math.PI*2,true); //draws the ball
context.closePath();
context.fill();
}
下面的工作代码
HTML,Java脚本
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX10: Moving In Simple Geometric Spiral </title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp() {
var radiusInc = 2;
var circle = {centerX:250, centerY:250, radius:2, angle:0, radiusInc:2}
var ball = {x:0, y:0,speed:.1};
var points = new Array();
theCanvas = document.getElementById('canvasOne');
context = theCanvas.getContext('2d');
var pointImage = new Image();
pointImage.src = "point.png"; <-- Comment this line out
if (!canvasSupport()) {
return;
}
function erraseCanvas() {
context.clearRect(0,0,theCanvas.width,theCanvas.height);
}
function drawPathPoints() {
//Draw points to illustrate path
points.push({x:ball.x,y:ball.y});
for (var i= 0; i< points.length; i++) {
context.drawImage(pointImage, points[i].x, points[i].y,1,1);
}
}
function drawTheBall() {
context.fillStyle = "#00AB0F"; //sets the color of the ball
context.beginPath();
context.arc(ball.x,ball.y,10,0,Math.PI*2,true); //draws the ball
context.closePath();
context.fill();
}
function buildBall() {
ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;
circle.angle += ball.speed;
circle.radius += radiusInc;
}
function drawScreen () {
erraseCanvas();
buildBall();
drawPathPoints();
drawTheBall();
}
function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen()
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>
小智 9
beginPath()beginPath() 清除当前内部路径对象及其子路径,这些路径会累积路径操作,如line,rect,arc,arcTo等,无论它们是否被填充或描边.
closePath()closePath()将当前路径或子路径位置与使用beginPath()或moveTo()使用该路径创建的路径上的第一个点相连接.后者在当前主路径上创建子路径,并且仅关闭该子路径.
有些方法对你来说是closePath()隐式的和临时的fill(),clip()这意味着这些调用不需要它.在任何情况下,必须调用之前一个stroke()(或者fill(),如果你选择使用,)被调用.
如果人们将其视为"关闭循环"而不是结束或关闭它没有的路径[对象],则可以更好地理解这种方法.
| 归档时间： |
|
| 查看次数： |
5853 次 |
| 最近记录： |