随机化HTML5画布元素

Question

尝试使用HTML5画布元素制作场景。

我要生成与画布内随机位置“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中缺少椭圆。这是一个用于制作椭圆的函数，但我不确定它与官方实现的比较。你也错过了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>