官网地址：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. 【转载】使用IntelliJ IDEA提示找不到struts-default文件

    创建strus,参考文如下: https://blog.csdn.net/u010358168/article/details/79769137 使用IntelliJ IDEA创建struts2工程时 ...

  2. 复习MySQL④查询功能、连接方式、联合查询

    用select语句查询: select〈目标列组〉 from〈数据源〉 [where〈元组选择条件〉] [group by〈分列组〉[having 〈组选择条件〉]] [order by〈排序列1〉〈 ...

  3. PAT_A1125#Chain the Ropes

    Source: PAT A1125 Chain the Ropes (25 分) Description: Given some segments of rope, you are supposed ...

  4. codeforces 427D Match & Catch（后缀数组，字符串）

    题目 参考:http://blog.csdn.net/xiefubao/article/details/24934617 题意:给两个字符串,求一个最短的子串.使得这个子串在两个字符串中出现的次数都等 ...

  5. Skyline Web 端数据浏览性能优化

    三维数据的效率一直是个瓶颈,特别是在Web端浏览一直是个问题,在IE内存限制1G的条件下,对于三维数据动不动几十G的数据量,这1G显得多么微不足道.虽然现在三维平台都是分级加载,或者在程序中采用数据分 ...

  6. 【数据结构】4.1图的创建及DFS深度遍历（不完善）

    声明:本代码仅供参考,根本就不是正确代码(至少在我看来,有很多BUG和不完美的地方) 图的存储方式选择为邻接表,并且headNode只是来存储一个链表的Node首地址额 总之这个代码写的很垃圾呀很垃圾 ...

  7. 第一个GTK程序

    /*我已经把代码写在此处  希望借鉴和完善!一起加油奥(PS:我的QQ是1693672542欢迎加我一起进行探讨学习奥!!!)*/#include <stdio.h>#include< ...

  8. Go在Ubuntu 14.04 64位上的安装过程

    1. 从 https://golang.org/dl/  或  https://studygolang.com/dl 下载最新的发布版本go1.10即go1.10.linux-amd64.tar.gz ...

  9. Rails 异常处理 &amp;&amp; 性能

    Rails 异常处理 的多种处理方法 1.  routes match '*path', via: :all, to: 'controller#action' 2.  application.rb 的 ...

  10. Android--真机调试程序方法

    方法例如以下: (1)手机通过数据线连接到手机上. (2)在手机中设置:设置-->应用程序-->开发-->USB调试 (3)在CMD中測试一下.连接是否正常,CMD中命令例如以下: ...