文档章节

Canvas基本的基本使用

最咸的咸鱼
 最咸的咸鱼
发布于 2017/07/06 23:53
字数 916
阅读 9
收藏 0
点赞 0
评论 0

1.1. Canvas绘制基本图形

①绘制线,矩形,圆角矩形,圆形,环形,弧形等

相关api:

Paint(画笔)相关api:
//给Paint设置颜色

paint.setColor(Color.RED);
//用此Paint绘制出的图形没有锯齿,但会损耗性能

paint.setAntiAlias(true);
//设置Paint样式(不填充),如:绘制一个空心圆,则设置如下样式

paint.setStyle(Paint.Style.STROKE);

//定义一个点,包含x和y坐标

PointF point= new PointF(x, y);

//绘制一个圆

参数1,2:圆心坐标

//参数3:半径

//参数4:画笔

canvas.drawCircle(x, y, radius, paint);

//绘制直线

//参数1,2:起点的x,y坐标

//参数3,4:起点的x,y坐标

canvas.drawLine(x1, y1,x2,y2, paint);

//定义一个矩形

//参数1:矩形的左边相对于屏幕左边缘的距离

//参数2:矩形的上边相对于屏幕上边缘的距离

//参数3:矩形的右边相对于屏幕左边缘的距离

//参数4:矩形的下边相对于屏幕上边缘的距离

RectF rect= new RectF(l, t, r, b);

//绘制弧形

//参数1:绘制弧形依赖的矩形,绘制出的弧形会与此矩形内切

//参数2:弧形的起始角度

//参数3:弧形的弧度

canvas.drawArc(rect, startAngle,sweepAngle
, false, paint);
//绘制一个矩形

canvas.drawRect(rect,paint);

//绘制一个点

//参数1,2:绘制的点的x,y坐标

canvas.drawPoint(x,y,paint);

//绘制多个点的x,y坐标

float[] pts = {x1, y1, x2, y2, x3,y3...};

//参数2:从pts集合中的哪个元素开始绘制(从哪里开始,哪里就作为x坐标,后面是y坐标,依此类推)

//参数3:包含pts集合中共几个元素
canvas.drawPoints(pts,offset,count,paint);

canvas.drawRoundRect(rectF,30f,30f,paint);

canvas的变换处理:

Android中的坐标系:默认是以屏幕左上角为原点,x方向向右为+,y方向向下为正

绘制界面是基于坐标系绘制的

若调用了canvas的translate或rotate方法相当于对坐标系进行了平移和旋转,基于旋转后的坐标系进行绘制工作.

1.2. Path绘制复杂图形

//移动到某个点

path.moveTo(x,y);

//绘制贝塞尔曲线

//贝塞尔曲线包含起始点,结束点和控制点,此api默认以path所在的点为起始点

//参数1,2:控制点的x,y坐标

//参数3,4:结束点的x,y坐标

path.quadTo(controlPointX,controlPointY,endPointX,endPointY);

//绘制一条直线,默认以path所在的点为起始点

path.lineTo(x,y);

//绘制一个弧形

//参数1:弧形内接的矩形

//参数2:弧形的起始角度

//参数3:弧形的弧度

path.arcTo(rectf,startAngle,sweepAngle);

//绘制一个路径

canvas.drawPath(path,paint);

1.3. 绘制文本

//在画布上绘制文本

//参数2,3:绘制文本的基准点的x和y坐标

canvas.drawText(text,x,y,paint);

//设置画笔的颜色

paint.setColor(Color.GREEN);

//设置画笔绘制的文本字体大小
paint.setTextSize(70);

//设置粗体
paint.setFakeBoldText(true);

//设置字体粗细

paint.setStrokeWidth(5);
//设置绘图样式 为填充

paint.setStyle(Paint.Style.FILL);
//设置绘图样式 为描边
paint.setStyle(Paint.Style.STROKE);
//设置绘图样式 为填充且描边
paint.setStyle(Paint.Style.FILL_AND_STROKE);
//绘制文本的基准点(240,400)在文本内容的中间
paint.setTextAlign(Paint.Align.CENTER);
//绘制文本的基准点(240,400)在文本内容的左边
paint.setTextAlign(Paint.Align.LEFT);

//绘制文本的基准点(240,400)在文本内容的右边
paint.setTextAlign(Paint.Align.CENTER);
//设置文本是否有下划线
paint.setUnderlineText(true);
//设置文本是否有删除线
paint.setStrikeThruText(true);

//设置文本的x方向上的缩放
paint.setTextScaleX(2);

1.4. Canvas的其他处理

注:canvas在做下列处理前必须先调用save方法处理后要调用restore方法

1,平移

canvas.translate(100,0);

2,旋转

canvas.rotate(300);

3,缩放

© 著作权归作者所有

共有 人打赏支持
最咸的咸鱼
粉丝 1
博文 3
码字总数 2366
作品 0
武汉
程序员
HTML5 Canvas(画布)教程 – 图像处理

本文是从HTML 5 Canvas Tutorial - Displaying Images 这篇文章翻译而来。 Canvas 标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中。在此之前,人们要想实现动态的网页应用,只...

红薯
2011/11/25
1K
8
轻量级 Canvas 绘图库 - OkayPainter

OkayPainter 是一个轻量级的Canvas框架库,提供了Canvas基本图形图像、动画、层、鼠标键盘事件管理机制。 使用OkayPainter OkayPainter 码云地址:https://gitee.com/djxfire/OkayPainter ,...

Janwool
05/21
0
0
Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的其他API:绘制线条、绘制椭圆、绘制图片、图片处理等...

aicoder
2014/08/29
0
0
HTML 5 canvas —— 基本语法

目录 简述 canvas 基础 2D context API 小节 简述 HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 元素。HTML 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。...

程明卫
2011/04/01
0
0
跨平台 canvas 绘图框架 - SpriteJS

SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库,可以基于 canvas 快速绘制结构化 UI 、动画和交互效果,并发布到任何拥有 canvas 环境的平台上(比如浏览器、小程序和 node )。 ...

welefen
06/20
0
0
canvas入门实战--邀请卡生成与下载

1.前言 写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是javascript。canvas的用途非常的广,特别是htm...

守候i
2017/12/14
0
0
一次 H5 「保存页面为图片」 的踩坑之旅

1. 需求 最近丁香医生的产品大佬又双叒叕搞事情,想要在 H5 中做一个医生邀请提问的功能,可以将医生的二维码名片分享出去,支持移动、PC 和微信。之前的图片是由后端生成的,并且会缓存三天...

丁香园F2E
2017/11/25
0
0
html5 canvas和小丑。

介绍   以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面——任何一个Web程序员都可以轻易的用画布(Canvas)技术...

笔阁
2015/10/20
343
0
HTML5 Canvas效率如何?

js运行效率在提升 编程语言的效率是前提,js自然比不上native的C语言效率,所以Canvas效率无疑比不上原生的2D图形绘制,但是js效率的提升是有目共睹的,以js与as为例,基本操作(运算操作,集...

nosand
2014/03/25
0
0
WPF <ZoomableCanvas> 实现缩放移动

熟悉WPF 的朋友应该知道Canvas 默认是不支持Scale 和Offset 操作的,如果我们想对Canvas 里包含的控件进行整体缩放或移动可能会比较麻烦。Kael Rowan 提供了ZoomableCanvas 类可以方便实现上...

junwong
2012/03/09
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sap netweaver developer studio安装svn插件

问题 我现在在Sap的IDE(netweaver developer studio)上面安装svn插件。 步骤 确定IDE使用的eclipse版本 Help→About SAP NetWeaver Developer Studio→Installation Details→Features→F...

亚林瓜子
8分钟前
0
0
Spring Cloud云服务架构 - commonservice-config配置服务搭建

1. 介绍 Spring Cloud Config为分布式系统中的外部配置提供服务器和客户端支持。使用Config Server,您可以在所有环境中管理应用程序的外部属性。客户端和服务器上的概念映射与Spring Enviro...

itcloud
9分钟前
1
0
大数据开发学习的内容介绍,成都大数据培训机构哪里好?

大数据开发培训已经成为了越来越多人的选择,大数据开发工程师也是各公司争相争夺的金领人才之一了,在当今科技发展非常迅速的社会里,越来越多人把职业规划投向了大数据开发。这里为大家整理...

加米谷大数据
14分钟前
2
0
函数

函数 函数是Python中最主要也是最重要的代码组织和复用手段。作为最重要的原则,如果你要重复使用相同或非常类似的代码,就需要写一个函数。通过给函数起一个名字,还可以提高代码的可读性。...

火力全開
15分钟前
0
0
gulp-webserverf启动服务,局域网无法访问

如题,gulp-server启动的服务,只能本机访问,局域网通过ip无法访问; 启动的其它项目,均可以访问成功; 网上资源,很多说什么防火墙之类的问题,都无果; 只需要给启动服务添加参数即可, ...

littleFaye
17分钟前
0
0
RabbitMQ实战:5种模式和示例

应用RabbitMQ的5种队列 一、简单队列 P:消息的生产者 C:消息的消费者 红色:队列 生产者实现思路: 创建连接工厂ConnectionFactory,设置服务地址127.0.0.1,端口号5672,设置用户名、密码...

spinachgit
18分钟前
0
0
mysql常见报错标号对应原因以及处理方法

mysql常见报错标号以及对应解决方法 报错标号 报错现象 解决方法 原因 1449 Cause: java.sql.SQLException: The user specified as a definer ('authplat_dev'@'%') does not exist 在控制台...

ChinaHYF
20分钟前
0
0
Java 监控系统技术选型

(1)操作系统监控 Sigar oshi (2)Tomcat监控 JMX 日志 (3)Oracle监控 日志 直连SQL查询 基于Druid连接池 (4)拓扑图 jtopo http://www.jtopo.com/demo/statictis.html...

cccyb
22分钟前
1
0
解决IDEA中moduel配置了maven依赖可是依然不能使用依赖中的类

POM.xml中明明配置了依赖,也开启了maven的 auto-import 下面的刷新maven也没用: 直到使用下面的解决办法才使依赖生效: IDEA打开右侧 maven projects 点击顶部的M图表(看下图) 出现如下对...

颖辉小居
22分钟前
0
0
Nginx proxy pass路由转发简单用法

一,在nginx中配置proxy_pass时的加不加/的问题要注意proxy_pass后的url最后的/当加上了/,相当于是绝对根路径,则nginx不会把location中匹配的路径部分代理走如果没有/,则会把匹配的...

binhu
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部