Question

尝试使用HTML5-canvas元素制作场景。

我想在画布内生成具有随机位置的'ice_cell'对象，同时使'ice_cell'对象的每个元素都具有随机半径，角度等。

这是我的（非工作）代码：

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

不幸的是我的Javascript知识很少，所以我几乎猜测了什么在语法方面。

任何人都可以选择我应该完全重写的部分吗？使用控制台进行调试并没有让我走得太远。

非常感谢你！

Answer 1

FireFox缺少Ellipse。这是一个制作椭圆的函数，但我不确定它与官方实现的比较。你也错过了css的x和y所以我对此进行了评论。

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>

随机化html5-canvas元素

1 个答案: