Canvas API（畫布）是在HTML5中新增的標簽用于在網頁實時生成圖像，并且可以操作圖像內容，基本上它是一個可以用JavaScript操作的位圖（bitmap）。
長沙企業網站建設開發中有時需要重疊繪圖，例如導入一張圖片作為背景在上面繪制圖形，如果是沒有撤銷的操作，即每一筆畫完就確定的話，只需要一層畫布直接操作即可：
var canvas_background=
document.
getElementById(
"canvas_background");
var ctx=canvas_background.getContext("2d");
var img = document.getElementById("img");
canvas_background.width=img.width;
canvas_background.height=img.height;
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.lineWidth=10;
ctx.moveTo(30,30);
ctx.lineTo(100,100);
ctx.stroke();
畫出的效果為這樣：
那如果這筆畫錯了呢？又或者不需要了呢？
很簡單，把該區域清除就好啦：
ctx.clearRect(20,20,90,90);
結果：
背景圖呢？我們的長沙網站制作背景圖沒有啦！
其實長沙企業網站建設將圖片作為背景也是把圖片畫在了畫布上，在上面繼續用筆繪畫的話，這些操作都是在一個圖層上的，導致清除的時候整個區域全部沒有了，這種時候我們就要用兩層畫布來完成操作，而每個元素是默認按順序排列的，需要設置position屬性，該屬性指定了元素的定位類型，這里用到的是absolute定位，表示絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>，設置完這個才會讓兩個圖層重疊，而不是一個跟著一個:
canvas_background.style.position="absolute";
還要設置元素的堆疊順序zIndex，數字大的在上面，我們需要把我們要繪畫的圖層放到頂部，這樣在鼠標點擊的時候是點擊在我們需要繪畫的圖層：
canvas_background.style.zIndex="-1";
canvas_draw.style.zIndex="1";
最終代碼：
var canvas_background=document.getElementById("canvas_background");
var ctx=canvas_background.getContext("2d");
var img = document.getElementById("img");
canvas_background.width=img.width;
canvas_background.height=img.height;
canvas_background.style.position="absolute";
canvas_background.style.zIndex="-1";
ctx.drawImage(img,0,0);
var canvas_draw=document.getElementById("canvas_draw");
canvas_draw.width=img.width;
canvas_draw.height=img.height;
canvas_draw.style.zIndex="1";
var ctx_draw=canvas_draw.getContext("2d");
ctx_draw.beginPath();
ctx_draw.lineWidth=10;
ctx_draw.moveTo(30,30);
ctx_draw.lineTo(100,100);
ctx_draw.stroke();
ctx_draw.clearRect(20,20,90,90);
這樣就可以正確清除背景還在了：
在線咨詢
