(转)第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上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...
随机推荐
- Redhat 7.0 安装桌面环境
1.安装桌面环境组件 #yum groupinstall "Server with GUI" 2.切换到图形界面 #startx 3.设置启动模式为图形界面 #rm /etc/sy ...
- 知识图谱+Recorder︱中文知识图谱API与工具、科研机构与算法框架
目录 分为两个部分,笔者看到的知识图谱在商业领域的应用,外加看到的一些算法框架与研究机构. 文章目录 @ 一.知识图谱商业应用 01 唯品金融大数据 02 PlantData知识图谱数据智能平台 03 ...
- 2018-12-25-C#-7.2-通过-in-和-readonly-struct-减少方法值复制提高性能
title author date CreateTime categories C# 7.2 通过 in 和 readonly struct 减少方法值复制提高性能 lindexi 2018-12-2 ...
- PHP算法之盛最多水的容器
给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...
- python中map函数的用法
map函数类似一个生成器 具体用例如下: def add(x): a =[,,] b = map(add,[,,]) print( list(map(add,[,,])) ) print(b,type ...
- SpringBoot 非web项目简单架构
1.截图 2.DemoService package com.github.weiwei02.springcloudtaskdemo; import org.springframework.beans ...
- 解析Spring第二天
目的:使用spring中纯注解的方式 前言:同样是使用idea创建一个普通的maven工程(如何创建一个普通的Maven工程可以参考mybatis入门第一天的详解). bean管理类常用的4个注解(作 ...
- C/C++语言实现单链表(带头结点)
彻底理解链表中为何使用二级指针或者一级指针的引用 数据结构之链表-链表实现及常用操作(C++篇) C语言实现单链表,主要功能为空链表创建,链表初始化(头插法),链表元素读取,按位置插入,(有序链表)按 ...
- VS2010-MFC(MFC常用类:CString类)
转自:http://www.jizhuomi.com/software/228.html CString类简介 CString类作为MFC的常用类,当之无愧.可以这样说,只要是从事MFC开发,基本都会 ...
- VS2010-MFC(常用控件:标签控件Tab Control 上)
转自:http://www.jizhuomi.com/software/205.html 前面两节讲了树形控件Tree Control,本节开始讲解标签控件Tab Control,也可以称为选项卡控件 ...