官网地址：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. [NOI2015]软件包管理器 树链剖分_线段树

    没有太大难度,刷水有益健康 Code: // luogu-judger-enable-o2 #include <bits/stdc++.h> #define setIO(s) freope ...

  2. javascript中创建新节点的方法 标签： javascript 2016-12-25 11:38 55人阅读 评论(0)

    一. var newnode=document.createElement("i"); var newnodeText=document.createTextNode(" ...

  3. 如何使用qtp12 utf进行功能测试

    首先,按照本博客的安装教程走的,右键管理员运行 接下来点击继续,这个界面只需要勾选到web即可 点击ok,开始运行 进入到主界面之后,file新建一个测试. 可以修改路径等等 点击create之后,出 ...

  4. Python中对两种utf-8格式的理解

    1.python文件开头utf-8格式的理解 2.程序中读取文件时utf-8格式的理解 aa.py文件代码示例: #!/usr/bin/python # -*- coding:utf-8 -*- fr ...

  5. 支付宝h5支付从支付到退款

    先说明,支付是之前写好的,调用的是支付宝旧的即时到账接口,所也没有去集成应用,退款调用的是无密即时到账退款接口!!! https://doc.open.alipay.com/支付宝文档资料,蚂蚁金服开 ...

  6. Nexus私服的搭建

    1.nexus 介绍     是开源的,用该框架架设maven私有服务器   2.nexus私服环境搭建     把nexus.war包放到tomcat的webapps下面     浏览且登录     ...

  7. HDU 1912

    坑,直接把公路看成X轴来做,然后,排序扫描一下,你懂的. #include <iostream> #include <algorithm> #include <cstdi ...

  8. 面向基于英特尔&#174; 架构的 Android* 的 CoCos2D

    Cocos2D 是一款游戏引擎,可与从电脑到手机等多种设备配合使用. 该引擎支持丰富的特性,可帮助创建出色的 2D 游戏.它甚至包含具备全面功能的物理引擎. CoCos2D 的核心元素是基本动画元素( ...

  9. 【cl】cmd相关命令

    cd  进入目录 dir  列出当前目录下的文件[在linux上是ls] e:  进入E盘 tab键可以快速进入目录

  10. 【cl】解决Fail to create the java Virtual Machine

    eclipse打开,提示Fail to create the java Virtual Machine 解决方法: 1.到eclipse安装目录下,找到eclipse.ini 2.按键盘ctrl+F, ...