随机化html5-canvas元素

Question

Trying to make a scene using HTML5-canvas elements.

I want to generate 'ice_cell' objects with randomized positions inside the canvas, while also having each element of an 'ice_cell' object have a randomized radius, angles, etc.

Here is my (non-working) code:

var can = document.getElementsByTagName('canvas')[0];
if (can.getContext) {
var ctx = can.getContext('2d');

var  ice_cell = function () {

  var posX = Math.random()*can.width();
  var posY = Math.random()*can.height();
  $(this).css({
    "top": y + "px",
    "left": x + "px",
    "transform": "translateX(-50%) translateY(-50%)"
  });

  var radX = [5, 10, 30, 80, 100];
  var rand_radX = radX[Math.floor(radX.length *Math.random())];

  var radY = [5, 10, 30, 80, 100];
  var rand_radY = radY[Math.floor(radY.length *Math.random())];

  var rot = [5, 30, 200];
  var rand_rot = rot[Math.floor(rot.length * Math.random())];

  var start = [0, 2, 5, 10, 50];
  var rand_start = start[Math.floor(start.length * Math.random())];

  var end = [0, 2, 50, 10, 100];
  var rand_end = end[Math.floor(end.length * Math.random())];

  var tranz = [1, 3, 4, 5, 7, 10];
  var rand_tranz = tranz[Math.floor(tranz.length * Math.random())];

  ctx.translate(tranz, 0);

  ctx.ellipse(rand_posX, rand_posY, rand_radX, rand_radY, rand_rot * Math.PI/180, rand_start, rand_end * Math.PI);
};

var colorStroke = function (color, width) {
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
  ctx.stroke();
};

var ice = function () {
  for(var i = 0; i<20;i++){
      colorStroke('cyan', 3);
      colorStroke('white', 1);
    };
  };
};

var degrees = 1;
  for(var i = 0; i < 50; i++){
  ice();
  ctx.rotate(degrees*Math.PI/180);
};

ctx.translate(can.width/2, can.height/2);

Unfortunately my Javascript knowledge is slim to none, so I have been almost guessing what goes where, syntax-wise.

Anyone able to pick out parts that I should just completely re-write? Debugging using the console hasn't been getting me very far.

Thank you so so much!

Answer 1

Ellipse is missing from FireFox. Here's a function to make ellipse but I'm not sure how it compares to the official implementation. You're also missing the x and y for the css so I commented that out.

 var can = document.getElementsByTagName('canvas')[0]; if (can.getContext) { var ctx = can.getContext('2d'); function ellipse(x, y, rx, ry, rotate, startAng, endAng) { ctx.save(); var w = rx * 2; var h = ry * 2; ctx.translate(x + w / 2, y + h / 2); ctx.scale(rx, ry); ctx.rotate(rotate); ctx.beginPath(); ctx.arc(0, 0, 1, startAng, endAng, false); ctx.restore(); } var ice_cell = function() { ctx.beginPath(); var rand_posX = Math.random() * can.width; var rand_posY = Math.random() * can.height; /* $(this).css({ "top": y + "px", "left": x + "px", "transform": "translateX(-50%) translateY(-50%)" }); */ var radX = [5, 10, 30, 80, 100]; var rand_radX = radX[Math.floor(radX.length * Math.random())]; var radY = [5, 10, 30, 80, 100]; var rand_radY = radY[Math.floor(radY.length * Math.random())]; var rot = [5, 30, 200]; var rand_rot = rot[Math.floor(rot.length * Math.random())]; var start = [0, 2, 5, 10, 50]; var rand_start = start[Math.floor(start.length * Math.random())]; var end = [0, 2, 50, 10, 100]; var rand_end = end[Math.floor(end.length * Math.random())]; var tranz = [1, 3, 4, 5, 7, 10]; var rand_tranz = tranz[Math.floor(tranz.length * Math.random())]; ctx.translate(tranz, 0); ellipse(rand_posX, rand_posY, rand_radX, rand_radY, rand_rot * Math.PI / 180, rand_start, rand_end * Math.PI); }; var colorStroke = function(color, width) { ctx.strokeStyle = color; ctx.lineWidth = width; ctx.stroke(); }; var ice = function() { for (var i = 0; i < 20; i++) { colorStroke('cyan', 3); colorStroke('white', 1); }; }; }; var degrees = 1; for (var i = 0; i < 50; i++) { ice_cell(); ice(); ctx.rotate(degrees * Math.PI / 180); }; ctx.translate(can.width / 2, can.height / 2); 

 <canvas></canvas>