我们已经学会了在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. HashMap底层实现原理及面试问题

    ①HashMap的工作原理 HashMap基于hashing原理,我们通过put()和get()方法储存和获取对象.当我们将键值对传递给put()方法时,它调用键对象的hashCode()方法来计算h ...

  2. HDU 2167 状压dp方格取数

    题意:给出一个数表,规定取出一个数后周围的八个数都不可取,求可获得的最大数字和 思路:状态压缩dp,每一行的取数方法为状态,显然,由于取数规则的限制,可取的状态并不是 1<<size_co ...

  3. Mybatis使用Dao代码方式CURD

    Mybatis 使用Dao代码方式进行增.删.改.查. 1.Maven的pom.xml <project xmlns="http://maven.apache.org/POM/4.0. ...

  4. mysql 09章_存储过程和函数

    一. 函数和存储过程的相同点: 函数和存储过程都是事先预编译并保存在数据库中的特殊的数据库对象, 需要执行相应功能时就可以直接通过“函数名”.“存储过程”调用其中的代码,以提高执行效率和代码的复用性. ...

  5. matlab 求已知概率密度函数的随机数生成

    N=10000; %需要随机数的个数 a=zeros(N,1); %存放随机数的数列 n=0; f1=@(t) 1./(1.2*pi*(1+5*(t-7.3).^2)); f2=@(t) 1./(1. ...

  6. leetcode-157周赛-5213-玩筹码

    题目描述: 自己的提交: class Solution: def minCostToMoveChips(self, chips: List[int]) -> int: res = float(' ...

  7. Vim统计字符串出现次数

    关键命令: :%s/pattern//gn 参数说明: % - 指明操作区间,%表示全文本:可以使用1,$或者行区间代替 s – substitute,表示替换 pattern - 要查找的字符串 / ...

  8. QT安装以及使用(QT支持linux和windows，也支持C/C++代码的编译运行，比vs简洁多)

    Windows: 0. QT Versionqt-win-opensource-4.7.4-mingwqt-creator-win-opensource-2.4.1 1. 系统Windows 7 &a ...

  9. VS 解决方案 Xamarin 配置

    需要额外安装 Mono 程序 工具->Xamarin->Android -> SDK路径  要和 你配置的ANDROID_SDK_ROOT 的路径一至如果没有 ANDROID_SDK ...

  10. csps模拟86异或，取石子，优化题解

    题面:https://www.cnblogs.com/Juve/articles/11736440.html 异或: 考试时只想出了暴力 我们可以对于二进制下每一位w,求出[l,r]中有几个数在这一位 ...