canvas小球碰壁隨機運動

admin發表於2018-08-31
Canvas隨機

分享一段程式碼例項，它利用canvas實現了小球隨機運動碰壁效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
let draw20 = id=> {
  let canvas = document.getElementById(id);
  if (canvas == null)
    return false;
  let context = canvas.getContext("2d");
  
  let interal = setInterval(() => move(context), 1);
}
  
let r = 30,
  x = r,
  y = r,
  mx = 0,
  my = 0,
  ml = 1,
  cw = 1000,
  ch = 500;
  
let move = context => {
  context.clearRect(0, 0, cw, ch);
  context.fillStyle = "#EEEEFF";
  context.fillRect(0, 0, cw, ch);
  
  context.beginPath();
  context.fillStyle = "rgba(255,0,0,0.5)";
  context.arc(x, y, r, 0, Math.PI * 2);
    context.fill();
  if (mx == 0) {
    x = x + ml;
    if (x >= cw - r) {
      mx = 1;
    }
  } else {
    x = x - ml;
    if (x <= r) {
      mx = 0;
    }
  }
  if (my == 0) {
    y = y + ml;
    if (y >= ch - r) {
      my = 1;
    }
  } else {
    y = y - ml;
    if (y <= r) {
      my = 0;
    }
  }
  
}
window.onload = () =>draw20("c1");
</script>
</head>
<body>
<canvas id="c1" width="1000" height="500"></canvas>
</body>
</html>

上面程式碼實現預期效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[JavaScript] 純文字檢視 複製程式碼
let draw20 = id=> {
  let canvas = document.getElementById(id);
  if (canvas == null)
    return false;
  let context = canvas.getContext("2d");
  
  let interal = setInterval(() => move(context), 1);
}

宣告一個函式，引數是canvas元素的id屬性值。

獲取指定的canvas元素物件，並判斷是否存在，如果不存在，則跳出函式。

然後獲取canvas繪圖環境，最後利用定時器函式實現不間斷的繪圖效果，也就是隨機運動碰壁效果。

[JavaScript] 純文字檢視 複製程式碼
let r = 30,
  x = r,
  y = r,
  mx = 0,
  my = 0,
  ml = 1,
  cw = 1000,
  ch = 500;

定義一些引數，比如圓的半徑或者矩形框的尺寸等，後面會有介紹。

[JavaScript] 純文字檢視 複製程式碼
context.clearRect(0, 0, cw, ch);
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, cw, ch);

上述程式碼用來繪製大的矩形區域。

首先利用clearRect方法擦除指定區域內的畫素，否則我們看到的不是單個小球的運動，而是無數小球形成的運動軌跡。

context.fillStyle規定矩形的背景顏色。

最後利用context.fillRect()方法繪製一個矩形。

[JavaScript] 純文字檢視 複製程式碼
context.beginPath();
context.fillStyle = "rgba(255,0,0,0.5)";
context.arc(x, y, r, 0, Math.PI * 2);
context.fill();

上述程式碼用來繪製小球。

開始一個新的路徑，然後設定填充色，最後繪製出這個小球。

[JavaScript] 純文字檢視 複製程式碼
if (mx == 0) {
    x = x + ml;
    if (x >= cw - r) {
      mx = 1;
    }
  } else {
    x = x - ml;
    if (x <= r) {
      mx = 0;
    }
  }

mx等於0表示在左邊，1表示在後邊。

很簡單的數學運算，一旦小球運動到了最後邊，那麼值就會變成1。

對於上下訪問也是同樣的道理，my等於0表示在上邊，等於1表示在下邊。

二.相關閱讀:

（1）.箭頭函式參閱箭頭函式介紹一章節。

（2）.document.getElementById參閱document.getElementById()一章節。

（3）.getContext參閱canvas getContext()方法一章節。

（4）.setInterval參閱JavaScript setInterval()一章節。

（5）.clearRect參閱canvas清除指定區域內容clearRect()一章節。

（6）.beginPath參閱canvas beginPath()方法詳解一章節。

（7）.arc參閱canvas arc()方法詳解一章節。

（8）.fillRect參閱canvas fillRect()一章節。

相關文章