09、canvas標籤之繪製圖片與設定背景
阿新 • • 發佈：2019-02-17
繪製圖片
圖片預載入，獲取圖片檔案
.onload中呼叫
.drawImage(img,x,y,w,h);繪製圖片(圖片,座標x,座標y,寬度,高度)
設定背景
.createPattern(img,平鋪方式)
平鋪方式:repeat,repeat-x,repeat-y,no-repeat
繪製圖片：
繪製背景：<!doctype html><!--聲明當前文件為html文件--> <html lang="en"><!--語言為英語--> <head><!--頭部--> <meta charset="UTF-8"><!--字元編碼：utf-8國際編碼 gb2312中文編碼--> <meta name="Keywords" content="關鍵詞"> <meta name="Description" content="描述"> <title>Document</title> <style>/*css樣式表的衣櫃*/ #can{ background:#000; } </style> </head> <body onload="drawImg()"><!--身體--> <canvas id="can" width="500" height="500"> 您的瀏覽器不支援canvas標籤，請您更換瀏覽器！！ </canvas> <img src="http://img2.3lian.com/2014/f5/63/d/16.jpg" id="img" style="display:none" /> <script> /* 繪製圖片 圖片預載入，獲取圖片檔案 onload中呼叫 drawImage(img,x,y,w,h);繪製圖片(圖片,座標x,座標y,寬度,高度) */ var can = document.getElementById("can"); var cxt = can.getContext("2d"); /* //方法一：存在部分不相容 var img = document.getElementById("img"); function drawImg(){ cxt.drawImage(img,0,0,can.width,can.height); } */ //方法二: var imgs = new Image(); imgs.src = "http://img2.3lian.com/2014/f5/63/d/16.jpg"; imgs.onload = drawImg;//圖片載入完成再執行 function drawImg(){ cxt.drawImage(imgs,0,0,can.width,can.height); } </script> </body> </html>
<!doctype html><!--聲明當前文件為html文件--> <html lang="en"><!--語言為英語--> <head><!--頭部--> <meta charset="UTF-8"><!--字元編碼：utf-8國際編碼 gb2312中文編碼--> <meta name="Keywords" content="關鍵詞"> <meta name="Description" content="描述"> <title>Document</title> <style>/*css樣式表的衣櫃*/ #can{ background:#000; } </style> </head> <body onload="drawImg()"><!--身體--> <canvas id="can" width="500" height="500"> 您的瀏覽器不支援canvas標籤，請您更換瀏覽器！！ </canvas> <img src="http://img2.3lian.com/2014/f5/63/d/16.jpg" id="img" style="display:none" /> <script> /* 設定背景 createPattern(img,平鋪方式) 平鋪方式:repeat,repeat-x,repeat-y,no-repeat */ var can = document.getElementById("can"); var cxt = can.getContext("2d"); var imgs = new Image(); imgs.src = "http://img2.3lian.com/2014/f5/63/d/16.jpg"; imgs.onload = createPat;//圖片載入完成再執行 function createPat(){ var bg = cxt.createPattern(imgs,"no-repeat"); cxt.fillStyle = bg; cxt.fillRect(0,0,can.width,can.height); } </script> </body> </html>