(转)第02节:在Canvas上画简单的图形
我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形。
在画东西之前我们需要了解画任何东西的基本三个步骤:
- 声明画布(canvas),用new fabric.Canvas(‘ id ‘);这里需要注意的是Canvas的C必须大写。
- 绘画图形,用fabric上的方法画出想要的图形。
- 添加图形,把画好的图形用add( )方法,加到canvas上才可以显示出来。
画方形的代码:
var canvas =new fabric.Canvas('main');//声明画布 //开始绘画方形
var rect = new fabric.Rect({
left:100,//距离画布左侧的距离,单位是像素
top:100,//距离画布上边的距离
fill:'red',//填充的颜色
width:30,//方形的宽度
height:30//方形的高度
}); canvas.add(rect);//把绘画好的方形添加到画布上
画圆形的代码:
var canvas =new fabric.Canvas('main');//声明画布 //开始画圆形
var circle = new fabric.Circle({
radius:50,//圆的半径
fill:'green',//填充颜色
left:200,//距离画布左侧的距离,单位是像素
top:200//距离画布上边的距离
}); canvas.add(circle);//把绘画好的圆形添加到画布上
画三角形的代码:
var canvas =new fabric.Canvas('main');//声明画布 //开始画三角形
var triangle = new fabric.Triangle({
width: 80,
height: 100,
fill: 'blue',
left: 50,
top: 50
}); canvas.add(triangle);//把绘画好形状添加到画布上
(转)第02节:在Canvas上画简单的图形的更多相关文章
- wxWidgets学习笔记——在屏幕上画简单的图形和文字
在屏幕上画简单图形和显示图片.处理简单鼠标键盘事件 /*************************************************************** * Name: M ...
- 使用JavaScript在Canvas上画出一片星空
随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...
- canvas上画出坐标集合,并标记新坐标,背景支持放大缩小拖动功能
写在前面:项目需求,用户上传一个区位的平面图片,用户可以在图片上添加新的相机位置,并且展示之前已绑定的相机坐标位置,图片支持放大缩小&拖动的功能.新增坐标,页面展示相对canvas定位,保存时 ...
- 玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...
- HTML5 canvas上画文字出现乱码
不是这个的问题, <html> <head> <meta charset="utf-8"/> </head> 是因为从网上复制粘贴下 ...
- (转载)C# GDI+ 画简单的图形:直线、矩形、扇形等
GDI+是一种绘图装置接口, 当拖动窗体是,窗体发生移动,window默认为从窗体移动到另一个地方,先发生擦除后再重新画一个窗体: 而我们自己动手画的图(如下面的线),不会重新画:在属性中,Paint ...
- (转)第03节:在Canvas上插入图片并设置旋转属性
我们已经学会了在Canvas上画简单的图形,这节我们就在Canvas上加一张图片.用到fabric.Image对象把图片添加到Canvas上. HTML文件:为了效果更好看我在html里写了一些CSS ...
- 用CSS3和Canvas来画网格
我们经常使用一些excel表格来处理数据,在html中,我们可以用table来制成表格.今天来看一下一些不同的方法. 方法一:使用CSS3的background的linear-gradient属性 l ...
- Canvas上绘制几何图形
重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...
随机推荐
- Elasticsearch(Transport Client)常用操作
这里描述操作elasticsearch采用TransportClient这种方式,官方明确表示在ES 7.0版本中将弃用TransportClient客户端,且在8.0版本中完全移除它. 记录一些常用 ...
- selenium基础-图形验证码
selenium基础-图形验证码 一.图形验证码作用 设计的初衷其实就是为了防自动化,防止一些人利用自动工具恶意攻击网站 二.图形验证码是由客户端生成还是由服务器端生成的? 图形验证码是由服务器端生成 ...
- Vue项目如何关闭Eslint检测
找到build/webpack.base.config.js文件,修改如下 将图中第二个红色框的内容 "createLintingRule()" 清空,然后保存重新启动项目即可.
- Activiti学习笔记4 — 流程实例化
1.创建流程引擎对象 private ProcessEngine processEngine = ProcessEngines.getDefaultProcessEngine(); 2.启动流程 流程 ...
- 使用OCCI操作Oracle数据库写入中文乱码
解决方法如下: oracle::occi::Environment *pOracleOcciEnv = Environment::createEnvironment(oracle::occi::Env ...
- elasticsearch.net一个查询问题
.Query(q => q.Bool(b => b.Must(m => m.MultiMatch(t => t .Fields(f => f.Field(obj => ...
- delphi 流程单打印
1.添加声明 f_count1: double; 2.得到拆分页数量 // Modified by 884 2018-04-20 14:50:18 AM0057 with aqTpCount do b ...
- bzoj2322 梦想封印
题意和题解见思路索引. 标程及易错点: #include<bits/stdc++.h> using namespace std; typedef long long ll; ll read ...
- win10 mysql5.7指定某个配置文件启动
点击开始菜单,搜索cmd.exe,左击以管理员身份运行 C:\Users\Administrator>cd C:\Program Files\MySQL\MySQL Server 5.7\bin ...
- php socket 发送HTTP请求 POST json
* HttpRequest.php <?php namespace et\http; /** * Created by PhpStorm. * User: mingzhanghui * Date ...