我们已经学会了在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. 极限学习机（Extreme Learning Machine）学习笔记

    最近研究上了这个一个东西--极限学习机. 在很多问题中,我大多会碰到两个问题,一个是分类,另一个就是回归.简单来说,分类是给一串数打个标签,回归是把一串数变为一个数. 在这里我们需要处理的数据一般维度 ...

  2. Nginx:413 Request Entity Too Large 的解决方法

    报错信息413 Request Entity Too Large 解决方法: (20M大小,自己调节,根据文件大小.)修改 php 的配置文件 /etc/php5/fpm/php.ini upload ...

  3. 《DSP using MATLAB》Problem 8.46

    下雨了,大风降温,一地树叶,终于进入冬季了 代码: %% ----------------------------------------------------------------------- ...

  4. DRF的序列化组件

    目录 DRF的序列化组件 Serializer组件 序列化 反序列化 ModelSerializer组件 序列化和反序列化 自定义Response方法 基表相关 DRF中ORM的多表关联操作 外键设计 ...

  5. sql 递归查询,刁刁的

    with cte as( select IDPlus,SuperiorsIDPlus,RoleGrade,viplevel,NAME,WeixinId from Member where IDPlus ...

  6. 02->交互式图形学--用glut库实现Sierpinski镂垫

    Sierpinski图形是一类有趣的图形,本文结合交互式图形学教材,讲解Sierpinski镂垫图形生成,作为入门图形学编程的第一课.为了简便,本文就2D来进行讨论.实验环境见01 算法 主要是根据随 ...

  7. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  8. .Net Core JWT Bearer 的认证

    关于JWT原理在这不多说,主要由三部分组成:Header.Payload.Signature,有兴趣自己上网了解. 1.首先创建.Net Core 一个Api项目 2.添加 JWT 配置 2.1 修改 ...

  9. Delphi 第一课

    Delphi 是面向对象的 可视化的集成开发环境 对象包括属性 方法   事件. 用户事件 对象响应事件 不同的对象响应事件不一样

  10. [JZOJ6258] 【省选模拟8.9】轰炸

    题目 题目大意 给你一棵树和树上的许多条从后代到祖先的链,选择每条链需要一定代价,问覆盖整棵树的所有点的最小代价是多少. \(n,m\leq 100000\) 正解 (由于时间过于久远,所以直接说正解 ...