官网地址：http://fabricjs.com/    git     https://github.com/kangax/fabric.js/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        canvas {

            border: 1px dashed black;

        }

    </style>

    <script src="fabric.min.js"></script>

</head>

<body>

    <canvas id="canvas" width="600" height="600"></canvas>

    <script>

        window.onload = function(){

            var canvas = new fabric.Canvas('canvas');

            var rect = new fabric.Rect({

                top : 50,

                left : 100,

                width : 100,

                height : 70,

                fill : 'red'

            });

            var circle = new fabric.Circle({

                radius:50,

                fill:'green',

                left:200,

                top:200

            });

            var triangle = new fabric.Triangle({

                width: 80,

                height: 100,

                fill: 'blue',

                left: 50,

                top: 50

            });

            canvas.add(rect, circle, triangle);

        }

    </script>

</body>

</html>

　　

fabric.js 学习的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. js学习之变量、作用域和内存问题

    js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...

  3. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  4. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  5. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  6. js学习篇1--数组

    javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. NODE.JS学习的常见误区及四大名著

    NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...

  9. Node.js学习系列总索引

    Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...

随机推荐

  1. 微信小程序 PDF下载打印

    在开发微信小程序时,需要打印生成的PDF,实现思路是:后端生成相应的PDF,微信小程序下载并打开. 但是微信小程序并不可以打印,所以需要借助其他APP比如:WPS,但是发现微信小程序down的PDF在 ...

  2. kvm之 virt-install工具命令详解

    一.virt-install是一个命令行工具,它能够为KVM.Xen或其它支持libvrit API的hypervisor创建虚拟机并完成GuestOS安装:此外,它能够基于串行控制台.VNC或SDL ...

  3. 操作符重载（day07）

    二十 操作符重载 eg:复数x+yi +4i (+2i) + (+4i) = +6i 双目操作符(L # R) 1.1 运算类的双目操作符:+ - * / -->左右操作数可以是左值也可以是右值 ...

  4. Python学习笔记之模块与包

    一.模块 1.模块的概念 模块这一概念很大程度上是为了解决代码的可重用性而出现的,其实这一概念并没有多复杂,简单来说不过是一个后缀为 .py 的 Python 文件而已 例如,我在某个工作中经常需要打 ...

  5. IntelliJ IDEA 和 webstorm更换主题

    1. 搜索http://color-themes.com/?view=index 2. 查找自己喜欢的主题,下载 3. 放在安装位置(个人习惯,放在哪都行,能找到就行) 4. 然后打开importSe ...

  6. VC2010常见问题的解决方案

    vc++里面的obj文件是什么文件Project(项目)中每个cpp经编译成为obj(object)目标文件,所有obj文件和资源文件经链接(link)成为可执行文件,obj文件可称为目标文件或中间文 ...

  7. Kafka的存储机制以及可靠性

    一.kafka的存储机制 kafka通过topic来分主题存放数据,主题内有分区,分区可以有多个副本,分区的内部还细分为若干个segment. 所谓的分区其实就是在kafka对应存储目录下创建的文件夹 ...

  8. UVA 10159

    http://blog.csdn.net/metaphysis/article/details/6926997 先向作者表达一下敬佩吧,十分巧妙地利用了状态压缩. 这道题有点组合数学的味道,当一个格子 ...

  9. Python 远程调用MetaSploit

    (1)安装Python的msgpack类库.MSF官方文档中的数据序列化标准就是參照msgpack. root@kali:~# apt-get install python-setuptools ro ...

  10. Maven学习--------基础2

    继续学习Maven. 4.2 变量 1) 问:怎样使用变量替换?项目中的某个配置文件比方jdbc.properties使用了一些pom中的变量,怎样在公布中使用包括真实内容的终于结果文件? 答:使用资 ...