我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形。

在画东西之前我们需要了解画任何东西的基本三个步骤:

  1. 声明画布(canvas),用new fabric.Canvas(‘ id ‘);这里需要注意的是Canvas的C必须大写。
  2. 绘画图形,用fabric上的方法画出想要的图形。
  3. 添加图形,把画好的图形用add( )方法,加到canvas上才可以显示出来。

画方形的代码:

  1. var canvas =new fabric.Canvas('main');//声明画布
  2.  
  3. //开始绘画方形
  4. var rect = new fabric.Rect({
  5. left:100,//距离画布左侧的距离,单位是像素
  6. top:100,//距离画布上边的距离
  7. fill:'red',//填充的颜色
  8. width:30,//方形的宽度
  9. height:30//方形的高度
  10. });
  11.  
  12. canvas.add(rect);//把绘画好的方形添加到画布上

画圆形的代码:

  1. var canvas =new fabric.Canvas('main');//声明画布
  2.  
  3. //开始画圆形
  4. var circle = new fabric.Circle({
  5. radius:50,//圆的半径
  6. fill:'green',//填充颜色
  7. left:200,//距离画布左侧的距离,单位是像素
  8. top:200//距离画布上边的距离
  9. });
  10.  
  11. canvas.add(circle);//把绘画好的圆形添加到画布上

画三角形的代码:

  1. var canvas =new fabric.Canvas('main');//声明画布
  2.  
  3. //开始画三角形
  4. var triangle = new fabric.Triangle({
  5. width: 80,
  6. height: 100,
  7. fill: 'blue',
  8. left: 50,
  9. top: 50
  10. });
  11.  
  12. canvas.add(triangle);//把绘画好形状添加到画布上

(转)第02节:在Canvas上画简单的图形的更多相关文章

  1. wxWidgets学习笔记——在屏幕上画简单的图形和文字

    在屏幕上画简单图形和显示图片.处理简单鼠标键盘事件 /*************************************************************** * Name: M ...

  2. 使用JavaScript在Canvas上画出一片星空

    随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...

  3. canvas上画出坐标集合,并标记新坐标,背景支持放大缩小拖动功能

    写在前面:项目需求,用户上传一个区位的平面图片,用户可以在图片上添加新的相机位置,并且展示之前已绑定的相机坐标位置,图片支持放大缩小&拖动的功能.新增坐标,页面展示相对canvas定位,保存时 ...

  4. 玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...

  5. HTML5 canvas上画文字出现乱码

    不是这个的问题, <html> <head> <meta charset="utf-8"/> </head> 是因为从网上复制粘贴下 ...

  6. (转载)C# GDI+ 画简单的图形:直线、矩形、扇形等

    GDI+是一种绘图装置接口, 当拖动窗体是,窗体发生移动,window默认为从窗体移动到另一个地方,先发生擦除后再重新画一个窗体: 而我们自己动手画的图(如下面的线),不会重新画:在属性中,Paint ...

  7. (转)第03节:在Canvas上插入图片并设置旋转属性

    我们已经学会了在Canvas上画简单的图形,这节我们就在Canvas上加一张图片.用到fabric.Image对象把图片添加到Canvas上. HTML文件:为了效果更好看我在html里写了一些CSS ...

  8. 用CSS3和Canvas来画网格

    我们经常使用一些excel表格来处理数据,在html中,我们可以用table来制成表格.今天来看一下一些不同的方法. 方法一:使用CSS3的background的linear-gradient属性 l ...

  9. Canvas上绘制几何图形

    重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...

随机推荐

  1. 全面解析HTML5优缺点

    HTML5是当下最主流的网页标准,它的出现给在线应用和手机游戏开发者带来了不少新机会.基于HTML5,开发者可以制作自己的网络游戏,而这个游戏无 论你在PC.手机还是平板电脑上,无论你用Chrome. ...

  2. 内置Jetty配置JSP支持过程中的常见报错

    目录 1. 常见报错及解决 1.1 JSP support not configured 1.2 JSTL标签解析 1.3 JSP编译 1.4 JSP实现依赖 1.5 EL表达式支持 2. 小结 1. ...

  3. elasticsearch的基本用法(转载)

    本文出自:http://blog.csdn.net/feelig/article/details/8499614 最大的特点:  1. 数据库的 database, 就是  index  2. 数据库 ...

  4. 9款很棒的网页绘制图表JavaScript框架脚本

    推荐9款很棒的可在网页中绘制图表的JavaScript脚本,这些有趣的JS脚本可以帮助你快速方便的绘制图表(线.面.饼.条…),其中包括jQuery.MooTools.Prototype和一些其它的J ...

  5. Logstash2.3.4趟坑之集成Redis哨兵模式

    最新在使用Lostash2.3.4收集数据的时候,在读取redis数据的时候,报了如下的一个异常: 异常如下 Pipeline aborted due to error {:exception=> ...

  6. 2018-10-8-3分钟教你搭建-gitea-在-Centos-服务器

    title author date CreateTime categories 3分钟教你搭建 gitea 在 Centos 服务器 lindexi 2018-10-08 09:54:39 +0800 ...

  7. VBA中msgbox的用法小结

    1.作用在消息框中显示信息,并等待用户单击按钮,可返回单击的按钮值(比如“确定”或者“取消”).通常用作显示变量值的一种方式.2.语法MsgBox(Prompt[,Buttons][,Title][, ...

  8. UVALive7461 - Separating Pebbles 判断两个凸包相交

    //UVALive7461 - Separating Pebbles 判断两个凸包相交 #include <bits/stdc++.h> using namespace std; #def ...

  9. Yii2 使用 npm 安装的包

    转载自: yii2.0.15 使用 npm 替换 bower,加速 composer 安装速度 [ 2.0 版本 ] 修改 ommon/config/main.php <?php return ...

  10. java String,StringBuilder和StringBuffer类的区别

    对String而言: String是只读字符串,所引用的字符串不能被改变,一经定义,无法再增删改. String 定义的字符串保存在常量池里面,进行+操作时不能直接在原有基础上拼接. 每次+操作 : ...