堆棧內存溢出
  簡體   English   中英

如何制作一系列可以按間隔重畫到屏幕上的圖形圓？

[英]How to make an array of graphic circles that I can redraw to the screen on intervals?

 原文  2014-08-20 21:01:40  5   1    javascript/ html5/ canvas

問題描述

我想在屏幕上繪制圓圈，但我想將它們存儲在數組中，以備將來用於構建a型游戲。 我對使用Java對象有些陌生。

我的對象是圓形，如下所示。 

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

我想創建一個可以說的50個圓的數組，可以循環顯示在屏幕上，因為當前我有一個正方形可以在屏幕上移動，可以用左右鍵控制。

我想將數組重新繪制到屏幕上。

**如何創建陣列？”

碼： 

<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();

在此處輸入圖片說明

所有代碼： 

<!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 個解決方案

解決方案1
 3  2014-08-20 21:10:31

這真的很簡單。 您只需使用以下內容創建一個數組： 

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;

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 重畫對象時如何清除屏幕？ 我該如何縮短將圓圈變成數組的代碼？ 如何在HTML中重新繪制矩形或調整矩形大小？ 圓移動SNAP SVG時需要重繪連接的線 如何更改圓圈的大小？ 如何制作此陣列？ 如何在屏幕上顯示這個數組？ 如何在2分鍾后然后每隔2分鍾執行一次函數？ 如何按順序按時間間隔翻轉卡片？ 我如何確保這些圓圈總是接觸 - 包裝問題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM