fabric.js 学习
官网地址：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 学习的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- js学习之变量、作用域和内存问题
js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...
- 【Knockout.js 学习体验之旅】（3）模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】（2）花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】（1）ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- js学习篇1--数组
javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- NODE.JS学习的常见误区及四大名著
NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...
- Node.js学习系列总索引
Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...
随机推荐
- Django MVC与MTV概念 Ajax、分页实现
MVC与MTV概念 MTV与MVC(了解) MTV模型(django): M:模型层(models.py) T:templates ...
- HTTP 返回码中 301 与 302 的区别
转自:http://blog.csdn.net/qmhball/article/details/7838989 一．官方说法301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之 ...
- 佛祖保佑 永无BUG ; 心外无法 法外无心
登录linux命令行后出现的图形 复制图形代码到相应的文件中保存,重新登录即可出现. Usage: For Ubuntu: 12.04: Just copy the content from Budd ...
- Top English interview Q&A part 2.
https://www.zhihu.com/question/19666878 1.how do you handle failure? I have always lived by the maxi ...
- 在做公司项目是时，昨天晚上还好的，但是第二天启动tomcat发现tomcat启动了，但是没把项目启动起来
1.问题:在做公司项目是时,昨天晚上还好的,但是第二天启动tomcat发现tomcat启动了,但是没把项目启动起来 2.问题排除: 1)昨天晚上还好着呢,并且没改动代码,排除代码问题.日志中无报错信息 ...
- LID&LDS 的另外一种算法
参见:LIS,LDS的另类算法(原) 然后讲讲我的想法: 有结论不上升子序列的个数=最长上升子序列的长度.....至于为什么,在下面讲 上代码: #include <iostream> ...
- netty byteBuf (二)
netty重新定义了byteBuf 而没使用jdk byteBuffer netty byteBuf与jdk byteBuffer的区别 (1)jdk buffer长度固定 byteBuf超过最大 ...
- 洛谷 P2587 BZOJ 1034 [ZJOI2008]泡泡堂
题目描述 //不知道为什么BZOJ和洛谷都没有这幅图了,大牛们几年前的博客上都有这幅图的,把它贴上来吧 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省 ...
- ACDream - k-GCD
先上题目: B - k-GCD Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Sub ...
- Python学习笔记13：标准库之子进程（subprocess包）
ubprocess包主要功能是运行外部的命令和程序.从这个意义上来说,subprocess的功能与shell类似. subprocess以及经常使用的封装函数 当我们执行python的时候,我们都是在 ...