如何创建一个图形圆阵列，我可以间隔重绘到屏幕上？

时间：2014-08-20 21:01:41

标签： javascript html5 canvas

我想在屏幕上绘制圆圈，但我想将它们存储在一个数组中，以便以后用于构建蜈蚣类游戏。我对Javascript中的对象有些新意。

我的对象是Circles，如下所示。

function Circles(x,y,r) {
    var cX = x;
    var cY = y;
    var cR = r;
}

我想创建一个50个圆圈的数组，我可以循环并显示到屏幕上，因为目前我有一个在屏幕上移动的方格，我可以用左右键控制。

我想将数组重绘到屏幕上。

**如何创建数组？＆＃34;

代码：

<script type="text/javascript">
var theCanvas=document.getElementById("myCanvas");
var canvasContext=theCanvas.getContext("2d");
var radX;
var radY;
var radR;
var context;
var numCircle = 50;
var circleArray = new Circles(50);

function Circles(x,y,r) {
    var cX = x;
    var cY = y;
    var cR = r;
}

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

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

function getRandomColor() {
    // creating a random number between 0 and 255 -- this will set the color of the random sized circle
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);

    // going from decimal to hex -- converts the int value to a hex for the color
    var hexR = r.toString(16);
    var hexG = g.toString(16);
    var hexB = b.toString(16);

    // making sure single character values are prepended with a "0"
    if (hexR.length == 1) hexR = "0" + hexR;
    if (hexG.length == 1) hexG = "0" + hexG;
    if (hexB.length == 1) hexB = "0" + hexB;

    // creating the hex value by concatenatening the string values
    var hexColor = "#" + hexR + hexG + hexB;
    return hexColor.toUpperCase();
} 

function drawGameBottomLine() {
    canvasContext.beginPath();
    canvasContext.moveTo(0,530);
    canvasContext.lineTo(450,530);
    canvasContext.stroke();
}

function getRandomNum(x,y) {
     radX = Math.random()*theCanvas.width;
     radY = Math.random()*theCanvas.height;
}

function buildCircle() {
    for(var i=0; i<numCircle; i++) {
      do { 
        isDrawable = false;
        radX = Math.random()*theCanvas.width;
        radY = Math.random()*theCanvas.height;
        radR = Math.random()*10+3;
            if ((radX>5 && radX<435) && (radY>0 && radY<520)) {
              circleArray.x[i] = radX;
              circleArray.y[i] = radY;
              circleArray.r[i] = radR;            
                isDrawable = true;
                //canvasContext.fillStyle='#123321;'//getRandomColor();
                //drawCircle(radX,radY,radR,canvasContext);
            }   
        } 
        while (isDrawable == false);
    }
}

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

drawGameBottomLine();
buildCircle();
drawCircles();

enter image description here

所有代码：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
    </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>    
  <script>
        var context;
        var rightKey = false;
        var leftKey = false;
        var upKey = false;
        var downKey = false;
        var block_x;
        var block_y;
        var block_h = 10;
        var block_w = 10;

        function init() {
          //canvas = document.getElementById('myCanvas');
          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 <= 0) 
            block_y = 0;

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

          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;
        }

        $(document).keydown(onKeyDown);
        $(document).keyup(onKeyUp);
  </script>
  </head>

<body onload="init();">

<canvas id="myCanvas" width="450" height="610" style="border:3px solid #c3c3c3;">
It appears that your browser does not support HTML5 and the canvas element.
</canvas>

<script type="text/javascript">
var theCanvas=document.getElementById("myCanvas");
var canvasContext=theCanvas.getContext("2d");
var radX;
var radY;
var radR;
var context;
var numCircle = 50;
var circleArray = new Circles(50);

function Circles(x,y,r) {
    var cX = x;
    var cY = y;
    var cR = r;
}

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

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

function getRandomColor() {
    // creating a random number between 0 and 255 -- this will set the color of the random sized circle
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);

    // going from decimal to hex -- converts the int value to a hex for the color
    var hexR = r.toString(16);
    var hexG = g.toString(16);
    var hexB = b.toString(16);

    // making sure single character values are prepended with a "0"
    if (hexR.length == 1) hexR = "0" + hexR;
    if (hexG.length == 1) hexG = "0" + hexG;
    if (hexB.length == 1) hexB = "0" + hexB;

    // creating the hex value by concatenatening the string values
    var hexColor = "#" + hexR + hexG + hexB;
    return hexColor.toUpperCase();
} 

function drawGameBottomLine() {
    canvasContext.beginPath();
    canvasContext.moveTo(0,530);
    canvasContext.lineTo(450,530);
    canvasContext.stroke();
}

function getRandomNum(x,y) {
     radX = Math.random()*theCanvas.width;
     radY = Math.random()*theCanvas.height;
}

function buildCircle() {
    for(var i=0; i<numCircle; i++) {
      do { 
        isDrawable = false;
        radX = Math.random()*theCanvas.width;
        radY = Math.random()*theCanvas.height;
        radR = Math.random()*10+3;
            if ((radX>5 && radX<435) && (radY>0 && radY<520)) {
              circleArray.x[i] = radX;
              circleArray.y[i] = radY;
              circleArray.r[i] = radR;            
                isDrawable = true;
                //canvasContext.fillStyle='#123321;'//getRandomColor();
                //drawCircle(radX,radY,radR,canvasContext);
            }   
        } 
        while (isDrawable == false);
    }
}

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

drawGameBottomLine();
buildCircle();
drawCircles();
</script>
</body>
</html>

1 个答案:

答案 0 :(得分：3)

这非常简单。您只需使用以下内容创建一个数组：

var anArray = [];

然后添加对象：

anArray.push(object)

您可以将Circle的定义更改为简单的工厂功能。这样的事情会让一切变得非常简单：

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)
// you can now access the circle properties like this
aCircle.x

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

//now this works too (the x coordinate of the first circle in the array):
anArray[0].x

我已经添加了一个小提琴，其中包含了一个简单的工作示例：http://jsfiddle.net/markm/jxeh0kks/

您的代码中有一些错误。最重要的是，要访问数组中的对象，首先需要指定数组的索引。

//Don't do this:
circleArray.x[i] = radX;
// Do this:
circleArray[i].x = radX;
相关问题
最新问题