Comment dessiner une petite personne avec du code JavaScript et HTML5-js tutoriel-php.cn

Comment dessiner une petite personne avec du code JavaScript et HTML5

不言

Libérer： 2018-06-25 11:17:45

original

2413 Les gens l'ont consulté

Cet article présente principalement l'effet méchant du dessin sur toile JavaScript+html5, impliquant JavaScript combiné avec le dessin graphique sur toile html5 et des techniques de remplissage de couleurs aléatoires. Les amis dans le besoin peuvent s'y référer

Cet article décrit JavaScript avec des exemples. +L'effet méchant dessiné par la toile html5. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code index.html est le suivant :

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  <title>canvas中的缩放</title>
  <style type="text/css">
   #canvas {
    background:black; margin-top:100px; margin-left:200px;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px" ></canvas>
 </body>
 <script type="text/javascript" src="canvas.js"></script>
 <script type="text/javascript">
  cache = {};
  var offsetX = 50,
   offsetY = 20;
  cache.context = dyl.createContext(&#39;canvas&#39;);
  dyl.rect(dyl.createColor(), 60 + offsetX, 0 + offsetY, 185, 100);
  dyl.rect(dyl.createColor(), 100 + offsetX, 100 + offsetY, 100, 50);
  dyl.rect(dyl.createColor(), 20 + offsetX, 150 + offsetY, 260, 200);
  dyl.rect(dyl.createColor(), 80 + offsetX, 350 + offsetY, 30, 110);
  dyl.rect(dyl.createColor(), 190 + offsetX, 350 + offsetY, 30, 110);
  dyl.circle(dyl.createColor(), 115 + offsetX, 55, 20);
  dyl.circle(dyl.createColor(), 190 + offsetX, 55, 20);
 </script>
</html>

Copier après la connexion

le code canvas.js est le suivant :

(function() {
  var dyl = {cache: {}};
  dyl.setContext = function(context) {
    dyl.cache._context = context;
    return context;
  }
  dyl.getDom = function(id) {
    return document.getElementById(id);
  }
  dyl._getContext = function() {
    return dyl.cache._context;
  }
  dyl.save = function() {
    var context = dyl._getContext();
    context ? context.save() : void(0);
  }
  dyl.restore = function() {
    var context = dyl._getContext();
    context ? context.restore() : void(0);
  }
  dyl.createContext = function(canvasID) {
    var canvas = this.getDom(canvasID);
    if(!canvas) {
      return null;
    }
    return dyl.setContext(canvas.getContext("2d"));
  }
  dyl.createColor = function() {
    var color = "rgb(";
    color += Math.round(Math.random()*255);
    color += ",";
    color += Math.round(Math.random()*255);
    color += ",";
    color += Math.round(Math.random()*255);
    color += ")";
    return color;
  };
  dyl.addImg = function(img, x, y) {
    var context = dyl._getContext();
    if(!img || !context) {
      return;
    }
    if(typeof img === "string") {
      var oImg = new Image();
      oImg.src = img;
      oImg.onload = function() {
        context.drawImage(oImg, x, y);
      }
      return;
    } 
    context.drawImage(img, x, y);
  };
  dyl.rect = function(color, x, y, width, height) {
    var context = dyl._getContext();
    if(!context) {
      return;
    }
    context.fillStyle = color;
    context.fillRect(x, y, width, height);
  };
  dyl.circle = function(color, x, y, r) {
    var context = dyl._getContext();
    context.save();
    context.fillStyle = color;
    context.beginPath();
    context.arc(x, y, r, 0, 2*Math.PI);
    context.fill();
    context.stroke();
  };
  dyl.scale = function(x, y) {
    var context = dyl._getContext();
    if(!context) {
      return;
    }
    x = x ? x : 1;
    y = y ? y : 1;
    context.scale(x, y);
  };
  if(!window.dyl) {
    window.dyl = dyl;
  }
})();

Copier après la connexion

Ce qui précède est le contenu de cet article. Tout le contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser HTML5 et jQuery pour faire apparaître la couche de zone de recherche de création

html5 et js dessiner des images selon la méthode Canvas

Comment utiliser jQuery et HTML5 pour obtenir l'effet spécial de changer de vêtements en secouant le téléphone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!