Introduction to the effects of JavaScript+html5 canvas drawing villains-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Introduction to the effects of JavaScript+html5 canvas drawing villains

不言

Jul 03, 2018 am 11:08 AM

canvas html5 javascript draw

This article mainly introduces the villain effect of JavaScript html5 canvas drawing, involving the techniques of combining JavaScript with html5 canvas graphics drawing and random color filling. Friends in need can refer to it

This article describes JavaScript html5 with examples The effect of the villain drawn by canvas. Share it with everyone for your reference, the details are as follows:

The screenshot of the running effect is as follows:

index.html code is as follows:

<!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>

Copy after login

canvas.js code is as follows:

(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;
  }
})();

Copy after login

##The above is the entire content of this article, I hope It will be helpful for everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Native JS Canvas code to implement the backgammon game

Use pure JS code to determine whether there is a string in the string How many Chinese characters are there?

The above is the detailed content of Introduction to the effects of JavaScript+html5 canvas drawing villains. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn