Question

我希望能够在画布上绘制一个圆圈，然后将其推入阵列。这不起作用。

    function Circle(x, y, r){
        this.x = x;
        this.y = y;
        this.r = r;
    }

    // create an array
    var anArray = [];

    // make a circle instance
    var aCircle = new Circle(100, 100, 20);

    //add it to the array
    anArray.push(aCircle);

    function drawCircle() {
        context.beginPath();
        context.arc(anArry[0].x,anArry[0].y,anArry[0].r,0,Math.PI*2,true);
        context.closePath();
        context.fill();

代码：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
        canvas {
            border: 5px solid #999;
            background-color: #000000;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>  
  </head>
<body>
<canvas id="myCanvas" width="450" height="610" style="border:3px solid #c3c3c3;">
</canvas>
<script>
        var context;
        var rightKey = false;
        var leftKey = false;
        var upKey = false;
        var downKey = false;
        var block_x;
        var block_y;
        var block_h = 15;
        var block_w = 15;

        var imageObj = new Image();
        imageObj.src = 'spaceShip.jpg';

        function Circle(x, y, r){
            this.x = x;
            this.y = y;
            this.r = r;
        }

        // create an array
        var anArray = [];

        // make a circle instance
        var aCircle = new Circle(100, 100, 20);

        //add it to the array
        anArray.push(aCircle);

        function drawCircle() {
            context.beginPath();
            context.arc(anArry[0].x,anArry[0].y,anArry[0].r,0,Math.PI*2,true);
            context.closePath();
            context.fill();

            /*
            for(var i=0; i<numCircle; i++) {
                canvasContext.fillStyle='#123321;'
                drawCircle(anArry[0].x,anArry[0].y,anArry[0].r,canvasContext);
            }
            */
        }

        function drawScore() {
            context.fillStyle = "red";
            context.font = "bold 16px Arial";
            context.fillText("1000", 5, 15);

            context.fillStyle = "red";
            context.font = "bold 16px Arial";
            context.fillText("14500", 200, 15);
        }

        function drawExtraLives() {
            context.drawImage(imageObj, 45, 3);
            context.drawImage(imageObj, 60, 3);
            context.drawImage(imageObj, 75, 3);
        }

        function init() {
          context = $('#myCanvas')[0].getContext('2d');
          WIDTH = $('#myCanvas').width();
          HEIGHT = $('#myCanvas').height();
          block_x = WIDTH / 2 - 15;
          block_y = HEIGHT / 2 - 15;
          setInterval('draw()', 25);
        }

        function clearCanvas() {
          context.clearRect(0,0,WIDTH,HEIGHT);
        }

        function rect(x,y,w,h) {
          context.beginPath();
          context.rect(x,y,w,h);
          context.endPath();
        }

        function draw() {
          clearCanvas();

          if (rightKey) 
            block_x += 5;
          else if (leftKey) 
            block_x -= 5;

          if (upKey) 
            block_y -= 5;
          else if (downKey) 
            block_y += 5;

          if (block_x <= 0) 
            block_x = 0;

          if ((block_x + block_w) >= WIDTH) 
            block_x = WIDTH - block_w;

          if (block_y <= 530) 
            block_y = 532;

          if ((block_y + block_h) >= HEIGHT) 
            block_y = HEIGHT - block_h;

          //all items that have to be redrawn go here.
          drawScore();  
          drawExtraLives();
          //drawCircle();
          drawGameBottomLine(); 
          context.drawImage(imageObj, block_x,block_y);
          //context.fillRect(block_x,block_y,block_w,block_h);
        }

        function onKeyDown(evt) {
          if (evt.keyCode == 39) rightKey = true;
          else if (evt.keyCode == 37) leftKey = true;
          if (evt.keyCode == 38) upKey = true;
          else if (evt.keyCode == 40) downKey = true;
        }

        function onKeyUp(evt) {
          if (evt.keyCode == 39) rightKey = false;
          else if (evt.keyCode == 37) leftKey = false;
          if (evt.keyCode == 38) upKey = false;
          else if (evt.keyCode == 40) downKey = false;
        }

        function drawGameBottomLine() {
            context.beginPath();
            context.moveTo(0,530);
            context.lineTo(450,530);
            context.strokeStyle = 'yellow';
            context.stroke();
        }

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

init(); //This method sets up the init for the whole game (all things that have to be redraw will be in the draw method.
</script>
</body>
</html>

此处所有代码

<!DOCTYPE HTML>
<html>
  <head>
    <style>
        canvas {
            border: 5px solid #999;
            background-color: #000000;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>  
  </head>
<body>
<canvas id="myCanvas" width="450" height="610" style="border:3px solid #c3c3c3;">
</canvas>
<script>
        var context;
        var rightKey = false;
        var leftKey  = false;
        var upKey    = false;
        var downKey  = false;
        var block_x;
        var block_y;
        var block_h = 15;
        var block_w = 15;
        var shipCnt = 4; //keeps track of the number of ships that the player has left
        var levelCnt = 1; //keeps track of which level the player is on so that the correct colored mushroom is displayed
        var PLAYERNUM = 'PLAYER 1';
        var READY = 'READY!'; //Used to display on the start of every new life

        var imageObj = new Image();
        imageObj.src = 'spaceShip.jpg';

        function Circle(x, y, r){
            this.x = x;
            this.y = y;
            this.r = r;
        }

        // create an array
        var anArray = [];

        // make a circle instance
        var aCircle = new Circle(100, 100, 20);

        //add it to the array
        anArray.push(aCircle);

        function drawCircle() {
            context.beginPath();
            context.arc(anArray[0].x, anArray[0].y, anArray[0].r, 0, Math.PI*2, false);
            context.fillStyle = 'yellow';
            context.fill();
            //context.closePath();

            /*
            for(var i=0; i<numCircle; i++) {
                canvasContext.fillStyle='#123321;'
                drawCircle(anArry[0].x,anArry[0].y,anArry[0].r,canvasContext);
            }
            */
        }

        function drawScore() {
            context.fillStyle = "red";
            context.font = "bold 16px Arial";
            context.fillText("1000", 5, 15);

            context.fillStyle = "red";
            context.font = "bold 16px Arial";
            context.fillText("14500", 200, 15);
        }

        function drawExtraLives() {
            context.drawImage(imageObj, 45, 3);
            context.drawImage(imageObj, 60, 3);
            context.drawImage(imageObj, 75, 3);
        }

        function drawPlayerOne() {
            context.fillStyle = "yellow";
            context.font = "bold 20px Arial";
            context.fillText(PLAYERNUM, 175, 260);
        }

        function drawReady() {
            context.fillStyle = "yellow";
            context.font = "bold 20px Arial";
            context.fillText(READY, 185, 280);
        }

        function init() {
          context = $('#myCanvas')[0].getContext('2d');
          WIDTH = $('#myCanvas').width();
          HEIGHT = $('#myCanvas').height();
          block_x = WIDTH / 2 - 15;
          block_y = HEIGHT / 2 - 15;
          setInterval('draw()', 25);
        }

        function clearCanvas() {
          context.clearRect(0,0,WIDTH,HEIGHT);
        }

        function rect(x,y,w,h) {
          context.beginPath();
          context.rect(x,y,w,h);
          context.endPath();
        }

        function onKeyDown(evt) {
          if (evt.keyCode == 39) rightKey = true;
          else if (evt.keyCode == 37) leftKey = true;
          if (evt.keyCode == 38) upKey = true;
          else if (evt.keyCode == 40) downKey = true;
        }

        function onKeyUp(evt) {
          if (evt.keyCode == 39) rightKey = false;
          else if (evt.keyCode == 37) leftKey = false;
          if (evt.keyCode == 38) upKey = false;
          else if (evt.keyCode == 40) downKey = false;
        }

        function drawGameBottomLine() {
            context.beginPath();
            context.moveTo(0,530);
            context.lineTo(450,530);
            context.strokeStyle = 'yellow';
            context.stroke();
        }

        function draw() {
          clearCanvas();

          if (rightKey) 
            block_x += 5;
          else if (leftKey) 
            block_x -= 5;

          if (upKey) 
            block_y -= 5;
          else if (downKey) 
            block_y += 5;

          if (block_x <= 0) 
            block_x = 0;

          if ((block_x + block_w) >= WIDTH) 
            block_x = WIDTH - block_w;

          if (block_y <= 530) 
            block_y = 532;

          if ((block_y + block_h) >= HEIGHT) 
            block_y = HEIGHT - block_h;

          //all items that have to be redrawn go here.
          drawScore();  
          drawExtraLives();
          drawPlayerOne();
          drawReady();
          //drawCircle();
          drawGameBottomLine(); 
          context.drawImage(imageObj, block_x,block_y);
          //context.fillRect(block_x,block_y,block_w,block_h);
        }

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

init(); //This method sets up the init for the whole game (all things that have to be redraw will be in the draw method.
</script>
</body>
</html>

Answer 1

你的drawCircle（）方法有一个语法错误（anArry＆lt;＆gt; anArray），这里有更新的代码对我有用：

function drawCircle() {
            context.beginPath();
            context.arc(anArray[0].x, anArray[0].y, anArray[0].r, 0, Math.PI*2, false);
            context.fillStyle = 'yellow';
            context.fill();
            //context.closePath();

            /*
            for(var i=0; i<numCircle; i++) {
                canvasContext.fillStyle='#123321;'
                drawCircle(anArry[0].x,anArry[0].y,anArry[0].r,canvasContext);
            }
            */
        }

最好将脚本放入页面<head>并将{（1}}调用init（）以确保在脚本运行时加载所有资源。（或者<body onload="init()">）

很好的教程，你可以编辑＆amp;运行示例在这里：http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

我想在数组的画布上绘制一个圆圈？

1 个答案: