（轉）第03節：在Canvas上插入圖片並設置旋轉屬性
阿新 • • 發佈：2017-07-24
doctype script border wid bsp viewport 設置 css樣式 png
我們已經學會了在Canvas上畫簡單的圖形，這節我們就在Canvas上加一張圖片。用到fabric.Image對象把圖片添加到Canvas上。
HTML文件：為了效果更好看我在html裏寫了一些CSS樣式。
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="../fabric.js"></script> <style> body{ background-color: #ccc; } #canvas{ display:block; background-color:#fff; border:1px solid #000; } #jspang-img{ display:none; } </style> </head> <body> <canvas id="canvas" width=‘800‘ height=‘800‘></canvas> <img src="./jsapng.png" id="jspang-img"> <script type="text/javascript" src="./script.js"></script> </body> </html>
JS文件：
var canvas = new fabric.Canvas(‘canvas‘);//聲明畫布 var imgElement = document.getElementById(‘jspang-img‘);//聲明我們的圖片 var imgInstance = new fabric.Image(imgElement,{ //設置圖片在canvas中的位置和樣子 left:100, top:100, width:200, height:100, angle:30 }); canvas.add(imgInstance);//加入到canvas中
通過上面步驟，我們已經把圖片加到了canvas裏，並用angle:30設置了順時針旋轉30度。我們其實還可以用opacity:0.8設置圖片的透明度為80%。
大多數工作開發中我們在html裏是沒有<img>標簽的，我們只知道一個圖片的地址，那我們也可以直接用javascript代碼把圖片加入到canvas裏的。
HTML文件：
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="../fabric.js"></script> <style> body{background-color: #ccc;} #canvas{display:block;background-color:#fff;border:1px solid #000;} </style> </head> <body> <canvas id="canvas" width=‘800‘ height=‘800‘></canvas> <script type="text/javascript" src="./script.js"></script> </body> </html>
JS文件：
var canvas = new fabric.Canvas(‘canvas‘); fabric.Image.fromURL(‘./jsapng.png‘, function(oImg) { oImg.scale(0.1);//圖片縮小10倍 canvas.add(oImg); });
（轉）第03節：在Canvas上插入圖片並設置旋轉屬性