JavaScript+html5 캔버스 그리기 악당 effect_javascript 기술-JS 튜토리얼-php.cn

JavaScript+html5 캔버스 그리기 악당 effect_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:17:44

원래의

1853명이 탐색했습니다.

이 글의 예시에서는 JavaScript+html5 캔버스로 그리는 악당 효과를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

런닝 효과 스크린샷은 다음과 같습니다.

index.html 코드는 다음과 같습니다.

<!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('canvas');
  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>

로그인 후 복사

canvas.js 코드는 다음과 같습니다.

(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 &#63; context.save() : void(0);
  }
  dyl.restore = function() {
    var context = dyl._getContext();
    context &#63; 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 &#63; x : 1;
    y = y &#63; y : 1;
    context.scale(x, y);
  };
  if(!window.dyl) {
    window.dyl = dyl;
  }
})();

로그인 후 복사

js 특수 효과와 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다: "jQuery 애니메이션 및 특수 효과 사용 요약", "일반적인 클래식 요약 jQuery의 특수 효과" 및 " JavaScript 애니메이션 특수 효과 및 기법 요약》

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.