(转)第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上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...
随机推荐
- 全面解析HTML5优缺点
HTML5是当下最主流的网页标准,它的出现给在线应用和手机游戏开发者带来了不少新机会.基于HTML5,开发者可以制作自己的网络游戏,而这个游戏无 论你在PC.手机还是平板电脑上,无论你用Chrome. ...
- 内置Jetty配置JSP支持过程中的常见报错
目录 1. 常见报错及解决 1.1 JSP support not configured 1.2 JSTL标签解析 1.3 JSP编译 1.4 JSP实现依赖 1.5 EL表达式支持 2. 小结 1. ...
- elasticsearch的基本用法(转载)
本文出自:http://blog.csdn.net/feelig/article/details/8499614 最大的特点: 1. 数据库的 database, 就是 index 2. 数据库 ...
- 9款很棒的网页绘制图表JavaScript框架脚本
推荐9款很棒的可在网页中绘制图表的JavaScript脚本,这些有趣的JS脚本可以帮助你快速方便的绘制图表(线.面.饼.条…),其中包括jQuery.MooTools.Prototype和一些其它的J ...
- Logstash2.3.4趟坑之集成Redis哨兵模式
最新在使用Lostash2.3.4收集数据的时候,在读取redis数据的时候,报了如下的一个异常: 异常如下 Pipeline aborted due to error {:exception=> ...
- 2018-10-8-3分钟教你搭建-gitea-在-Centos-服务器
title author date CreateTime categories 3分钟教你搭建 gitea 在 Centos 服务器 lindexi 2018-10-08 09:54:39 +0800 ...
- VBA中msgbox的用法小结
1.作用在消息框中显示信息,并等待用户单击按钮,可返回单击的按钮值(比如“确定”或者“取消”).通常用作显示变量值的一种方式.2.语法MsgBox(Prompt[,Buttons][,Title][, ...
- UVALive7461 - Separating Pebbles 判断两个凸包相交
//UVALive7461 - Separating Pebbles 判断两个凸包相交 #include <bits/stdc++.h> using namespace std; #def ...
- Yii2 使用 npm 安装的包
转载自: yii2.0.15 使用 npm 替换 bower,加速 composer 安装速度 [ 2.0 版本 ] 修改 ommon/config/main.php <?php return ...
- java String,StringBuilder和StringBuffer类的区别
对String而言: String是只读字符串,所引用的字符串不能被改变,一经定义,无法再增删改. String 定义的字符串保存在常量池里面,进行+操作时不能直接在原有基础上拼接. 每次+操作 : ...