CANVAS 3D

Weezy
Javascript

Bonjour,

Comment peut ton affiché le contenu d'un canvas en 3D.

Voici un exemple de code qui affiche un nuage de mot:

<html>
<head>
<title> Nuage de Mot </title>
</head>
<body>

<style>
  canvas {
      padding-left: 100;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
      margin-top: 150;
      width: 500px;
  }
</style>

<canvas id="theCanvas" width="1000" height="750"></canvas>

<script language="Javascript">

var canvas=document.getElementById('theCanvas');
var context=canvas.getContext('2d');

var text = "nuage, mots, cristal, javascript javascript, javascript, javascript, cloud, cloud truc bidule clavier smartphone, portable, france, euro 2016 coupe espagne italie aéroport, écrant souris lampe soeil lune pelouse eau pluie neige neige, soleil, sourie bleu jaune" ;

var pattern = /((^|[^a-z0-9àáâãäåçèéêëìíîïðòóôõöùúûüýÿ]))/gi;//????
var textWithoutShortWord = text;
textWithoutShortWord = textWithoutShortWord.replace(pattern, " " );//à revoir
var patternWord=/[\wàáâãäåçèéêëìíîïðòóôõöùúûüýÿ]+/gi;
var words = textWithoutShortWord.match(patternWord);

var newArray= new Array();

var positionX=60;
var positionY=24;
var limitWidth = canvas.width; //limite de la largeur

for(i = 0; i<words.length; i++){

  var index = words[i];
    if(typeof newArray[index] != 'undefined'){
      newArray[index]++;
    }
    else{
      newArray[index] = 1;
    }
}

for (var index in words){

  context.font = newArray[words[index]]*8 + "pt Comic Sans MS";
  wordWidth =context.measureText(words[index]).width;
  positionX=positionX+wordWidth;

  if (newArray[words[index]]>=1){
    context.fillText(words[index],positionX,positionY);
    newArray[words[index]]=0;
  }

  if(positionX>limitWidth-90){
    positionX=0;
    positionY=positionY+40;
  }
}

</script>
</body>
</html>

Mon but est d'afficher le nuage de mot en 3D

Aucune réponse