Rumah > Artikel > hujung hadapan web > Kanvas html5 JavaScript mencipta kemahiran effect_javascript segi empat sama berwarna-warni

Kanvas html5 JavaScript mencipta kemahiran effect_javascript segi empat sama berwarna-warni

WBOYasal: 2016-05-16 15:17:471910semak imbas

Contoh dalam artikel ini menerangkan cara menggunakan kanvas html5 JavaScript untuk mencipta kesan segi empat sama berwarna-warni. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Tangkapan skrin kesan berjalan adalah seperti berikut:

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');
  for(var i=0; i<10; i++) {
   for(var j=0; j<10; j++) {
    var alpha = j * 0.1 + 0.1;
    (function(i, j ,alpha) {
     setTimeout(function() {
      dyl.rect(dyl.createColor(), i*50, j*50, 100, 100, alpha);
     }, 100*j*i);
    })(i, j ,alpha);
   }
  }
 </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, alpha) {
    var context = dyl._getContext();
    if(!context) {
      return;
    }
    context.save();
    context.fillStyle = color;
    context.globalAlpha = alpha &#63; alpha : 1;
    context.fillRect(x, y, width, height);
    context.restore();
  };
  dyl.circle = function(color, x, y, r, alpha) {
    var context = dyl._getContext();
    context.save();
    context.fillStyle = color;
    context.beginPath();
    context.globalAlpha = alpha &#63; alpha : 1;
    context.arc(x, y, r, 0, 2*Math.PI);
    context.fill();
    context.stroke();
  };
  dyl.clearRect = function(x, y, width, height) {
    var context = dyl._getContext();
    if(!context) {
      return;
    }
    context.clearRect(x, y, width, height);
  };
  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;
  }
})();

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas js boleh menyemak topik khas di tapak ini: "Ringkasan animasi jQuery dan penggunaan kesan khas", "Ringkasan klasik biasa kesan khas jQuery" dan " Ringkasan kesan dan teknik khas animasi JavaScript》

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Pelaksanaan mudah jquery ajax paging plug-in_jqueryArtikel seterusnya：Pelaksanaan mudah jquery ajax paging plug-in_jquery

Artikel berkaitan

Lihat lagi