I need to make new array of string elements, from elements in one default array and other arrays i way like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>A canvas animation example</title>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 20px;
font-family: arial, verdana, helvetica;
background: #fff;
}
h1 {
font-size: 140%;
font-weight: normal;
color: #036;
border-bottom: 1px solid #ccc;
}
canvas {
position: relative;
margin-right: 20px;
margin-bottom: 20px;
}
pre {
float: left;
display: block;
background: rgb(238,238,238);
border: 1px dashed #666;
padding: 15px 20px;
margin: 0 0 10px 0;
}
</style>
</head>
<body>
<fieldset>
<h1>A canvas example</h1>
<ul>
<li>
<canvas class=re1g width=110 height=110></canvas>
<canvas class=re2g width=110 height=110></canvas>
<canvas class=re3g width=110 height=110></canvas>
<canvas class=re1p width=110 height=110></canvas>
<canvas class=re2p width=110 height=110></canvas>
<canvas class=re3p width=110 height=110></canvas>
<canvas class=re1b width=110 height=110></canvas>
<canvas class=re2b width=110 height=110></canvas>
<canvas class=re3b width=110 height=110></canvas>
<canvas class=re1y width=110 height=110></canvas>
<canvas class=re2y width=110 height=110></canvas>
<canvas class=re3y width=110 height=110></canvas>
</li>
<li>
<canvas class=ci1g width=110 height=110></canvas>
<canvas class=ci2g width=110 height=110></canvas>
<canvas class=ci3g width=110 height=110></canvas>
<canvas class=ci1p width=110 height=110></canvas>
<canvas class=ci2p width=110 height=110></canvas>
<canvas class=ci3p width=110 height=110></canvas>
<canvas class=ci1b width=110 height=110></canvas>
<canvas class=ci2b width=110 height=110></canvas>
<canvas class=ci3b width=110 height=110></canvas>
<canvas class=ci1y width=110 height=110></canvas>
<canvas class=ci2y width=110 height=110></canvas>
<canvas class=ci3y width=110 height=110></canvas>
</li>
</ul>
</fieldset>
<script type="text/javascript">
(function($) {
$(function() {//on DOM ready
// ===================
var avaibleColors = [
'#00C8A8','#75B520','#00CD25',
'#FF63F6','#FF66B3','#DA73FF',
'#978AFF','#00B5DE','#CF992C',
'#CF992C','#FF795F','#C38628'
];
var squareCol = [
're1g','re2g','re3g',
're1p','re2p','re3p',
're1b','re2b','re3b',
're1y','re2y','re3y'
];
var circleCol = [
'ci1g','ci2g','ci3g',
'ci1p','ci2p','ci3p',
'ci1b','ci2b','ci3b',
'ci1y','ci2y','ci3y'
];
var squareObj = [];
var circleObj = [];
var obj;
$.each(squareCol, function(i, val){
obj = {};
obj[val] = avaibleColors[i];
squareObj.push(obj);
});
$.each(circleCol, function(i, val){
obj = {};
obj[val] = avaibleColors[i];
circleObj.push(obj);
});
// ===================
$.each(squareObj, function(reColor, cValue) {
var canvasClass = $('canvas.'+reColor+'');
if(canvasClass != null) {
$.each(canvasClass, function(){
var ctx = this.getContext('2d');
ctx.save();
ctx.lineJoin = 'round';
ctx.fillStyle = cValue;
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(90, 20);
ctx.quadraticCurveTo(90, 20, 90, 20);
ctx.lineTo(90, 90);
ctx.quadraticCurveTo(90, 90, 90, 90);
ctx.lineTo(20, 90);
ctx.quadraticCurveTo(20, 90, 20, 90);
ctx.lineTo(20, 20);
ctx.quadraticCurveTo(20, 20, 20, 20);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
});
}// end of if
console.log(reColor+' '+cValue);
});
// ===================
$.each(circleObj, function(ciColor, cValue) {
var canvasClass = $('canvas.'+ciColor+'');
if(canvasClass != null) {
$.each(canvasClass, function(){
var ctx = this.getContext('2d');
ctx.save();
ctx.lineJoin = 'round';
ctx.fillStyle = cValue;
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(55, 55, 45, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
});
}// end of if
});
// ===================
});
})(jQuery)
</script>
</body>
Simpler example:
var i_array = ['word1','word2','word3']; //array of n elements
var ii_array = ['text1','text2','text3']; //array of n elements
var iii_array = ['string1','string2','string3']; //array of n elements
//here is what I need:
var iv = ['text1':'word1','text2':'word2','text3':'word3'];
var v = ['string1':'word1','string2':'word2','string3':'word3'];
//To use in
$.each(iv, function(a,b){
//do something with a,b
});
$.each(v, function(a,b){
//do something with a,b
});
How to make pars of elements in new array, and use in drawing canvas..?
A simple for loop should be able to do this:
See jsfiddle here.
UPDATED TO SOLVE REAL PROBLEM
Your code was messed up in a few places. See working jsfiddle here.
First of all, you don’t need to create new arrays. Just use the index of your circleCol or squareCol arrays to pull the color values from the availableColors array.
Like this:
Second, you don’t need to check if your canvasClass variable is null, because $.each() will pull each value of the array and no more; therefore, it will always pull a value for canvasClass, which in your case is the array key.
If anything you should use
if (canvas.getContext){as described in the MDN canvas tutorial.Hope this helps. I kind of entirely redid the script, so I can’t say exactly where the problem was. I know that it was difficult to get the combined arrays to work with the $.each() functions.
The problem was:
$.each() didn’t work on the combined arrays. It did, however, work, if you used a for…in… loop. See JSFIDDLE.
Notice that you get nothing in console or in an alert if you tried to get the values from squareObj or circleObj. I think it’s because it turned into an object. But I’m not familiar with this, so I can’t say for sure.