我们已经学会了在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, 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); });