我们已经学会了在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上插入图片并设置旋转属性的更多相关文章

  1. 前端使用html2canvas截图，在canvas上绘制图片及保存图片

    1.使用html2canvas 存在的问题: 不同的机型绘制位置不同的问题. 这个主要因为Html动态设置了html的dpr.(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字 ...

  2. 【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域

    使用POI对xlsx中插入超链接和 插入图片 package com.it.poiTest; import java.awt.image.BufferedImage; import java.io.B ...

  3. 【Servlet3.0新特性】第03节_文件上传

    这是一个Web Project 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web- ...

  4. 插入数据值 设置标签属性的值 来自 精通ASP-NET-MVC-5-弗瑞曼

  5. canvas中插入的图片 自适应 ？

    注意 不是用canvas画图 是在canvas中插入图片 我很是惊讶  为啥明明img标签就能解决的非要用canvas 不过别人写好的 我一般不会动 需求是 canvas中的图片自适应不能拉伸…… 老 ...

  6. canvas插入图片设置背景，渐变

    ##在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 ima ...

  7. canvas 2.0 图片绘制

    绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...

  8. Excel催化剂开源第40波-Excel插入图片做到极致的效果

    不知道是开发人员的自我要求不高还是用户的使用宽容度足够大,在众多Excel插入图片的版本中,都没有考虑到许多的可大幅度提升用户体验的细节处理. Excel催化剂虽然开发水平有限,但也在有限的能力下,尽 ...

  9. Hexo博客插入图片的方法

    Hexo博客插入图片的方法 hexo图片blog hexo blog 插入图片的方法总结 hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /pub ...

随机推荐

  1. code rain???

    Everybody loves the visual effect of the falling binary code known as ” Rain ” in The Matrix. In thi ...

  2. 2018湘潭大学程序设计竞赛【D】

    题目链接:https://www.nowcoder.com/acm/contest/105/D 题意:就是数的fib表示方法.按权展开,又按二进制算出结果输出. 题解:贪心和数论吧.找到跟数最接近的f ...

  3. 随笔-ansible-3

    关于循环的一些事: 是否是因为模块的原因? item适用于copy,但不适用于yum.虽然出现了警告,但并不表示不能用.功能还是不受影响的. 在上例中,我们使用了yum.copy.service模块( ...

  4. iOS开发系列-NSFileManager

    NSFileManager NSFileManager类主要对文件和目录的操作(删除.修改.移动.复制等等).

  5. windows使用cmd查看、杀死进程

    查看某个进程: netstat -ano | findstr  端口号 杀死某个进程: taskkill /f  /pid  进程号

  6. Linux queue.h之TAILQ队列分析

    转自 这两天想看看memcached的实现,所以先学习了libevent,使用起来还是比较简单的,其实是对select/poll/kqueue等的封装,学习libevent过程中又遇到了linux下队 ...

  7. FaceNet pre-trained模型以及FaceNet源码使用方法和讲解

    Pre-trained models Model name LFW accuracy Training dataset Architecture 20180408-102900 0.9905 CASI ...

  8. vue组件参数校验

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  9. Java 基础 - Exception和Error

    综述 Exception 和 Error 都是继承了 Throwable 类,在 Java 中只有 Throwable 类型的实例才可以被抛出(throw)或者捕获(catch),它是异常处理机制的基 ...

  10. Java 多线程 - 创建线程的方法 + Executors.newXXXThreadPool()缺点

    java中创建线程的三种方法以及区别: https://www.cnblogs.com/3s540/p/7172146.html 通过Executor 的工具类,创建三种类型的普通线程池: https ...