You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.4 KiB
105 lines
2.4 KiB
|
|
<canvas id="canvas" style="border:1px solid #000"></canvas>
|
|
<button onclick="tourneG(tab,canvas,ctx)">Tourner G</button>
|
|
<button onclick="tourneD(tab,canvas,ctx)">Tourner D</button>
|
|
|
|
<canvas id="canvas2" style="border:1px solid #000"></canvas>
|
|
<button onclick="tourneG(tab2,canvas2,ctx2)">Tourner G2</button>
|
|
<button onclick="tourneD(tab2,canvas2,ctx2)">Tourner D2</button>
|
|
|
|
<canvas id="canvasTotal" style="border:1px solid #000"></canvas>
|
|
|
|
<script>
|
|
var canvas = document.getElementById('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
var canvas2 = document.getElementById('canvas2');
|
|
var ctx2 = canvas2.getContext('2d');
|
|
|
|
var canvasT = document.getElementById('canvasTotal');
|
|
var ctxT = canvasT.getContext('2d');
|
|
|
|
tab=[];
|
|
tab2=[];
|
|
tabTotal=[];
|
|
|
|
width=300; // 6 lignes de 50px
|
|
height=300; // 6 colonnes de 50px
|
|
canvas.width=width;
|
|
canvas2.width=width;
|
|
canvasT.width=width;
|
|
|
|
canvas.height=height;
|
|
canvas2.height=height;
|
|
canvasT.height=height;
|
|
|
|
function faireCercle(x,y,color,lectx){
|
|
var cercle = new Path2D();
|
|
|
|
nx=50*(x>0 ? x+2 : x+3);
|
|
ny=50*(y>0 ? y+2 : y+3);
|
|
|
|
cercle.moveTo(nx, ny);
|
|
cercle.arc(nx+25, ny+25, 25, 0, 2 * Math.PI);
|
|
|
|
lectx.fillStyle = color;
|
|
lectx.fill(cercle);
|
|
//tab.push([x,y,color]);
|
|
}
|
|
|
|
function tourneG(letab,lecanvas,lectx)
|
|
{
|
|
letab.forEach(element => {
|
|
tmp=element[0];
|
|
element[0]=element[1];
|
|
element[1]=-tmp;
|
|
});
|
|
toutDessiner(letab,lecanvas,lectx);
|
|
//console.log("nv coords "+tab);
|
|
empiler();
|
|
}
|
|
|
|
function tourneD(letab,lecanvas,lectx)
|
|
{
|
|
letab.forEach(element => {
|
|
tmp=element[1];
|
|
element[1]=element[0];
|
|
element[0]=-tmp;
|
|
});
|
|
toutDessiner(letab,lecanvas,lectx);
|
|
//console.log("nv coords "+tab);
|
|
empiler();
|
|
}
|
|
|
|
function toutDessiner(pts,lecanvas,lectx)
|
|
{
|
|
//var lectx = lecanvas.getContext('2d');
|
|
|
|
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
|
|
pts.forEach(element=> {
|
|
faireCercle(element[0],element[1],element[2],lectx);
|
|
})
|
|
}
|
|
|
|
function empiler()
|
|
{
|
|
tabTotal=[];
|
|
tab.forEach(element => {
|
|
tabTotal.push(element);
|
|
})
|
|
tab2.forEach(element => {
|
|
tabTotal.push(element);
|
|
})
|
|
|
|
toutDessiner(tabTotal,canvasT,ctxT);
|
|
}
|
|
|
|
tab.push([-3,-3,"green"],[-3,2,"red"],[1,2,"orange"]);
|
|
tab2.push([-2,-3,"green"],[-3,1,"blue"],[-1,2,"purple"]);
|
|
toutDessiner(tab,canvas,ctx);
|
|
toutDessiner(tab2,canvas2,ctx2);
|
|
//console.log("anc coords " + tab);
|
|
|
|
|
|
</script>
|