（转）第03节：在Canvas上插入图片并设置旋转属性

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

 

posted @ 2017-07-24 19:30  惊蛰1993  阅读(1625)  评论(0)  编辑  收藏  举报