Canvas详解

最新推荐文章于 2022-08-09 23:46:19 发布
最新推荐文章于 2022-08-09 23:46:19 发布
阅读量181 收藏 2
点赞数
分类专栏： Android 文章标签： 高级UI Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35932326/article/details/102456703
版权

Canvas详解

绘制几何图形，文本，位图等

  1. 在指定坐标绘制位图
public void drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint) {
    super.drawBitmap(bitmap, left, top, paint);
}
  1. 根据给定的起始点和结束点绘制连线
public void drawLine(float startX, float startY, float stopX, float stopY,
        @NonNull Paint paint) {
    super.drawLine(startX, startY, stopX, stopY, paint);
}
  1. 根据指定的path绘制连线
public void drawPath(@NonNull Path path, @NonNull Paint paint) {
    super.drawPath(path, paint);
}
  1. 根据指定的坐标绘制点
public void drawPoint(float x, float y, @NonNull Paint paint) {
    super.drawPoint(x, y, paint);
}
  1. 根据给定的坐标绘制文字
public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
    super.drawText(text, x, y, paint);
}

绘制位置、形状变换等

  1. 平移操作translate
canvas.drawRect(0,0,500,500,mPaint);
canvas.translate(50,50);
mPaint.setColor(Color.BLUE);
canvas.drawRect(0,0,500,500,mPaint);

在这里插入图片描述

  1. 缩放操作scale
canvas.drawRect(200,200,700,700,mPaint);
canvas.scale(0.5f,0.5f);
mPaint.setColor(Color.BLUE);
canvas.drawRect(200,200,700,700,mPaint);

在这里插入图片描述
其中四个参数的方法为：

canvas.drawRect(200,200,700,700,mPaint);
canvas.scale(0.5f,0.5f,200,200);
//等同于 在四位参数的源码中为
//        translate(px, py);
//        scale(sx, sy);
//        translate(-px, -py);
mPaint.setColor(Color.BLUE);
canvas.drawRect(200,200,700,700,mPaint);

在这里插入图片描述
其中四个参数的方法中，后2个参数进行了位移操作。

  1. 旋转操作rotate
canvas.drawRect(300,300,600,600,mPaint);
//rotate旋转默认为从坐标的0，0位置开始的，想在原图形上旋转需要平移坐标原点至原图形位置
canvas.rotate(45,450,450); px,py为旋转中心位置坐标
mPaint.setColor(Color.BLUE);
canvas.drawRect(300,300,600,600,mPaint);

在这里插入图片描述

  1. 倾斜操作skew
canvas.drawRect(0,0,400,400,mPaint);
//此方法以tan的对边比临边的角度比值进行倾斜
canvas.skew(1,0); //在x轴方向倾斜45度，y轴逆时针旋转45度
//canvas.skew(0,1); //在y轴方向倾斜45度，x轴顺时针旋转45度
mPaint.setColor(Color.BLUE);
canvas.drawRect(0,0,400,400,mPaint);

在这里插入图片描述

  1. 切割操作，参数指定区域内可以继续绘制clipXXX
canvas.drawRect(200,200,700,700,mPaint);
mPaint.setColor(Color.BLUE);
canvas.drawRect(200,800,700,1300,mPaint);
//画布裁剪的部分，为一个200，200，700，700的矩形部分，只能在这一部分进行绘制，其他部分绘制不显示
canvas.clipRect(200,200,700,700);
//超出裁剪区域，无法绘制
canvas.drawCircle(200,800,100,mPaint);
//部分在绘制区域，显示部分
canvas.drawCircle(300,300,300,mPaint);
//完全在绘制区域，全部显示
canvas.drawCircle(400,400,100,mPaint);

在这里插入图片描述

  1. 反向切割操作，参数指定区域内不可以继续绘制clipOutXXX
canvas.drawRect(200, 200, 700, 700, mPaint);
mPaint.setColor(Color.BLUE);
canvas.drawRect(200, 800, 700, 1300, mPaint);
//画布裁剪的部分，为一个200，200，700，700的矩形部分，这一部分不能绘制，只能在这一部分之外的区域进行绘制
canvas.clipOutRect(200, 200, 700, 700);
//裁剪区域，无法绘制
canvas.drawCircle(200, 800, 100, mPaint);
//部分在裁剪区域，显示部分
canvas.drawCircle(300, 300, 300, mPaint);
//完全在绘制区域之外，全部显示
canvas.drawCircle(400, 400, 100, mPaint);

在这里插入图片描述

  1. 可通过matrix实现平移，缩放，旋转等操作setMatrix
canvas.drawRect(0,0,500,500,mPaint);
Matrix matrix = new Matrix();
//移动
//matrix.setTranslate(50,50);
//旋转45度
matrix.setRotate(45);
//缩放
//matrix.setScale(0.5f,0.5f);
canvas.setMatrix(matrix);
mPaint.setColor(Color.BLUE);
canvas.drawRect(0,0,500,500,mPaint);

状态保存和恢复

canvas调用各种translate等变换操作后，后续的操作都是基于变换后的canvas，都会受到影响，对于后续操作不方便。Canvas提供了save,saveLayer,saveLayerAlpha,restore,restoreToCount来保存和恢复状态。

  1. 通过save和restore restoreToCount保存和恢复状态
canvas.drawRect(0,0,500,500,mPaint);
//位移后画布移动  保存状态
canvas.save();
canvas.translate(50,50);
mPaint.setColor(Color.BLUE);
canvas.drawRect(0,0,500,500,mPaint);
//再次调整画布
canvas.save();
canvas.translate(100,100);
mPaint.setColor(Color.GREEN);
canvas.drawRect(0,0,500,500,mPaint);
//调用save时将其存放的栈中，每调用一次restore释放一个save，返回到上一个状态位置
canvas.restore();
mPaint.setColor(Color.BLUE);
canvas.drawLine(0,0,700,700,mPaint);
//再次释放
canvas.restore();
mPaint.setColor(Color.RED);
canvas.drawLine(0,0,500,900,mPaint);

在这里插入图片描述
也可以调用restoreToCount返回到指定的画布位置状态

//调用restoreToCount返回到改保存画布的位置，将此位置之上存在的所有栈全部剔除
canvas.restoreToCount(saveOne);
mPaint.setColor(Color.RED);
canvas.drawLine(0,0,500,900,mPaint);

在这里插入图片描述

  1. 通过离屏绘制进行恢复。即先离屏将其绘制完毕，再将界面添加到画布上（此方法可以指定离屏绘制的画布大小）
canvas.drawRect(200,200,700,700,mPaint);
//离屏绘制区域为0，0，700，700的长方形区域 
int layerId = canvas.saveLayer(0,0,700,700,mPaint);
mPaint.setColor(Color.BLUE);
Matrix matrix = new Matrix();
//画布原点平移100，100
matrix.setTranslate(100,100);
canvas.setMatrix(matrix);
//由于离屏绘制区域为0，0，700，700，且画布平移了100，100，所以新画的矩形0，0，700，700不能完全展示完毕
canvas.drawRect(0,0,700,700,mPaint);
//恢复之前的状态
canvas.restoreToCount(layerId);
mPaint.setColor(Color.RED);
canvas.drawRect(0,0,100,100,mPaint);

在这里插入图片描述

人生恍如初梦
关注
专栏目录
canvas 详解
爱睡的虫虫
07-18 2481
canvas 什么是canvas？ 是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素. canvas标签用来绘制图像，本身就是一个画布，没有绘画能力，所有的绘制都是通过js脚本实现的 都能干什么？ 可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画 默认大小 Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。不能通过c...
Canvas 详解
u013513228的博客
08-05 1268
Canvas 详解题外话先插播题外话，其实这个canvas详解很多人都写过，好多还是大神写的，我的这个肯定不能和大神比了，有人就说这简直就是重复造轮子(其实吧，如果将轮子比作车轮，我认为我这里电瓶车的轮子，大神的是法拉利的轮子，两者之间是有不少差距滴，不过正因为有差距，我们才需要努力去学习)，浪费时间，不过我却不这么认为，比如通过这一次整理canvas，我了解了它里面的大部分方法(有些还是不了解)，
HTML5之canvas详解
EmotionComputer
02-13 3995
对于HTML5的内容，由于目前并不是所有的浏览器都兼容，所以我们首先需要判断你所用的浏览器是否支持canvas标签，判断方法如下: 你的浏览器不支持canvas标签 如果你的浏览器支持canvas标签，那么就不会显示那句话，否则就会显示出来。 1.定义canvas标签 2.
CANVAS的使用详解
It_BeeCoder的博客
01-08 1650
由于在网络上找到关于Canvas的使用都比较抽象，也许是我的逻辑思维不太好吧，总是感觉理解起来比较困难， 尤其是对save()和restore()方法的使用。本篇文章的内容就是对Canvas的使用进行一下总结，包括它的两种不同的使用 情节和它的一些方法进行一下说明。  1 Bitmap，可以来自资源/文件，也可以在程序中创建，实际上的功能相当于图片的存储空间； 2 Canvas，紧密与Bi
canvas 使用方法详解
triste anima
07-18 2705
canvas 使用纪要了解canvas H5画图标签，本身没有绘图能力，需要javascript脚本来执行绘图 创建canvas使用context 创建对象， var cxt=c.getContext("2d"); getContext("2d") 为H5内建对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 <canvas id='a'></canvas> var
Canvas详解及常见问题.md
最新发布
06-13
Canvas详解及常见问题
Canvas详解及代码绘制安卓机器人
05-13
Canvas是Android系统中用于2D图形绘制的核心组件，它提供了丰富的功能来在屏幕上画出各种形状、图像和文字。在Android应用开发中，Canvas经常被用来实现自定义视图、动画效果以及游戏画面等。本篇文章将深入解析...
解决canvas画布图片跨域问题
shuai1999m的博客
07-29 1万+
设置图片crossOrigin属性 image.crossOrigin = 'Annoymous' crossorigin有如下取值： anonymous：执行一个cors请求，但是该请求不会发送相关证书，例如cookie。服务器需要相应的设置Access-control-Allow-Origin响应头，图片才是未被污染的。 use-credentials: 执行一个cors请求，该请求会发送相关证书，携带cookie和http基本验证信息。服务器需要相应设置Access-Control-Allow.
Canvas跨域问题较完美解决方案（解决测试、生产环境差异的跨域问题）
zzppff的博客
07-16 7675
近日在做需求时遇到需要Canvas处理后下载图片功能，因图片为筒内图片，所以在本地、测试、生产环境均存在跨域问题 话不多说，先上代码 Canvas允许使用跨域图片 //初始化canvas var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //新建一个图片 var img = new I...
如何解决canvas 绘图时位置偏离
yunduanaoligei的博客
04-09 3470
今天主要聊聊如何解决canvas 绘图时位置偏离，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 使用 canvas 绘图时，指定的 div 大小一定不要超过该 div 所能获得的最大范围，否则绘制的点会跟实际位置发生偏离。 例如 Untitled 1 <script type="text/javascrip
微信小程序 canvas 层级过高 解决方案
热门推荐
qq_35646076的博客
04-25 1万+
问题描述： 先看bug： 解决方案： baidu上 关于小程序canvas层级过高 的的解决方案，大致分为两种： 将canvas标签替换为图片： setTimeout(() => { wx.canvasToTempFilePath({ x: 0, y: 0, width: 168, height: 168, canvasId: 'Canvas', success: (res) =>
canvas实现保存超出屏幕之外的内容
Rechal_Mei的博客
07-06 3195
画布生成课程表画布画出来，然后保存到本地 简述：先说一下，实现目标。 so,上图 因为，项目需求，需要把动态的课程表，实现点击保存按钮，实现将如上图一样的课程表保存到本地。 那么，实现的思路就是： 画布画出来，然后保存到本地 开发框架：uni， 开发工具：Hbulid-X， 既然有了思路，那么就好办了吧,我把课表分成了四个部分去画 1.左边的时间 2.顶部的场馆信息+底部的照片 3.底部的日期显...
html5 canvas 不遮挡,Html5 Canvas - 对外部区域进行遮挡
weixin_29061509的博客
06-21 484
我需要遮挡外部区域，即我在着色器中绘制的形状被正常绘制，然后对其反色进行阴影处理。其最简单的例子来说，并指出，工作不到位：Html5 Canvas - 对外部区域进行遮挡// canvasBackground is the actual background// canvasBackgroundContext is its context// To make it simple, I will f...
canvas详解（1）-原理
风火一回，一生不毁
08-13 8159
canvas详解(1)-原理 原理 canvas本身并不具备绘画能力，它本身只是一个画布，是一个容器。绘图能力是基于html5的getContext("2d")返回的CanvasRenderingContext2D对象来完成的。 const canvas = document.getElementById("payAbilityLoginTree");//获取canvas dom对象...
Canvas跨域问题 ? 如何解决
weixin_72426732的博客
08-09 4190
这是由于canvas受限于CORS策略, 会存在跨域问题, 虽然可以使用图像, 但是绘制到画布上会污染画布, 一旦一个画布被污染, 就无法提取画布的数据. 比如无法使用画布toBlod() , toDataURL() 或者getImageData() 方法。img标签上新增了crossorgin属性, 这个属性决定了图片获取过程中是否开启CORS功能( 存在兼容性问题 ) image.setAttribute(‘crossorgin’,’anonymous’)...
HTML5 Canvas详解与基本使用
Canvas通过设置width和height属性定义绘图区域，并且允许通过JavaScript的绘图函数来绘制复杂的图像。对于不支持Canvas的浏览器，可以提供替代内容以确保兼容性。" Canvas是HTML5的一个重要特性，它引入了一种新的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值