JavaScript html5 canvas畫布中刪除一個塊地區的方法

JavaScript html5 canvas畫布中刪除一個塊地區的方法_javascript技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了html5 canvas畫布中刪除一個塊地區的方法。分享給大家供大家參考，具體如下：

運行效果截圖如下：

附:圖中，黑色小方塊即為刪除掉的塊地區

具體代碼如下：

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(), 150, 150, 200, 200, 0.5);  for(var i=0; i<10; i++) {   dyl.clearRect(150 + i*20, 150 + i*20, 20, 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 ? 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, alpha) {    var context = dyl._getContext();    if(!context) {      return;    }    context.save();    context.fillStyle = color;    context.globalAlpha = alpha ? 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 ? 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 ? x : 1;    y = y ? y : 1;    context.scale(x, y);  };  if(!window.dyl) {    window.dyl = dyl;  }})();

希望本文所述對大家JavaScript程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More