Canvas(画布)的使用

最新推荐文章于 2023-09-12 22:52:13 发布
最新推荐文章于 2023-09-12 22:52:13 发布
阅读量1.7k 收藏 1
点赞数

 public class MyView extends View {

  public MyView(Context context) {
   super(context);
  }

  @Override
  protected void onDraw(Canvas canvas) {

   super.onDraw(canvas);

   // 设置画布的背景颜色
   canvas.drawColor(Color.WHITE);
   /**
    * 定义矩形为空心
    */
   // 定义画笔1
   Paint paint = new Paint();
   paint.setStyle(Paint.Style.STROKE);
   // 消除锯齿
   paint.setAntiAlias(true);
   // 设置画笔的颜色
   paint.setColor(Color.RED);
   // 设置paint的外框宽度
   paint.setStrokeWidth(2);

   // 画一个圆
   canvas.drawCircle(40, 30, 20, paint);
   // 画一个正放形
   canvas.drawRect(20, 70, 70, 120, paint);
   // 画一个长方形
   canvas.drawRect(20, 170, 90, 130, paint);
   // 画一个椭圆
   RectF re = new RectF(20, 230, 100, 190);
   canvas.drawOval(re, paint);

   /**
    * 定义矩形为实心
    */
   paint.setStyle(Paint.Style.FILL);
   // 定义画笔2
   Paint paint2 = new Paint();
   // 消除锯齿
   paint2.setAntiAlias(true);
   // 设置画笔的颜色
   paint2.setColor(Color.BLUE);
   // 画一个空心圆
   canvas.drawCircle(150, 30, 20, paint2);
   // 画一个正方形
   canvas.drawRect(185, 70, 130, 120, paint2);
   // 画一个长方形
   canvas.drawRect(200, 130, 130, 180, paint2);
   // 画一个椭圆形
   RectF re2 = new RectF(200, 230, 130, 190);
   canvas.drawOval(re2, paint2);
  }
 }
}

运行效果如下：

教你如何用Android画一个几何图形 - 蓝色衣着 - 蓝色衣着
 

 



Canvas提供了如下一些方法：


    Canvas():创建一个空的画布，可以使用setBitmap()方法来设置绘制的具体画布；


    Canvas(Bitmap bitmap):以bitmap对象创建一个画布，则将内容都绘制在bitmap上，bitmap不得为null;


    Canvas(GL gl):在绘制3D效果时使用，与OpenGL有关；


    drawColor:设置画布的背景色；


    setBitmap:设置具体的画布；


    clipRect:设置显示区域，即设置裁剪区；


    isOpaque:检测是否支持透明；


    rotate:旋转画布；

 

  下面我们就用Canvas来画一个机器人——android,oh my love!一看就知道，机器人的外形是由矩形/圆/圆弧/线条组成的，因此要知道怎么用Canvas画矩形/圆/圆弧和线条。可惜阿，上面几个方法基本都没用上。


    canvas.drawRect(RectF,Paint)方法用于画矩形，第一个参数为图形显示区域，第二个参数为画笔，设置好图形显示区域Rect和画笔Paint后，即可画图；


    canvas.drawRoundRect(RectF, float, float, Paint) 方法用于画圆角矩形，第一个参数为图形显示区域，第二个参数和第三个参数分别是水平圆角半径和垂直圆角半径。


    canvas.drawLine(startX, startY, stopX, stopY, paint)：前四个参数的类型均为float，最后一个参数类型为Paint。表示用画笔paint从点（startX,startY）到点（stopX,stopY）画一条直线；


    canvas.drawArc(oval, startAngle, sweepAngle, useCenter, paint)：第一个参数oval为RectF类型，即圆弧显示区域，startAngle和sweepAngle均为float类型，分别表示圆弧起始角度和圆弧度数,3点钟方向为0度，useCenter设置是否显示圆心，boolean类型，paint为画笔；


    canvas.drawCircle(float,float, float, Paint)方法用于画圆，前两个参数代表圆心坐标，第三个参数为圆半径，第四个参数是画笔；


   清楚这些函数的用法之后，我们是否就噼里啪啦地敲代码了呢？别急，我们来搞个设计。既然这些函数都是用来画图的，也就是说它们有共性——画。所有我们应该设计一个接口interface，对于这次任务，只需要一个成员方法就足够了。对于每一个图形，是只用一个方法画，还是将画图封装成类呢？我建议是封装成类。因为说不定你明天就会嫌弃它不会动，想它动起来，或者你过两天又希望在机器人的每个部位加点什么。所以我将每一个图形封装成类，都实现一个名叫drawGraphics的接口。最后，要记得给UI创建一个线程哦。


   就这样我开始动手做了，但是很快就发现问题了。什么问题？在定位的时候，也就是设置每个图形的显示区域时，我自以为这里的Rect跟Java的Rectangle是一样的，但我错了。原来这厮跟MFC中的RECT结构才是一家人，害我折腾了许久。


    Rect（int left,int top,int right,int bottom）

 

    left

              矩形左上角X坐标值

    top

              矩形左上角Y坐标值

    right

              矩形右下角X坐标值

    bottom

              矩形右下角Y坐标值


   下面借用一张图说明（忘了哪个博客找来的(*^__^*) 嘻嘻……），如Rect(150, 75, 260, 120) 一目了然吧。


 

画了个Android——Canvas类的使用

    还有一点非常重要的是，屏幕最上方的状态栏和标题栏总占去来50的高度，同时坐标原点下移到标题栏下方，即如果你的手机屏幕分辨率为（320X480），编程时如果没有设置去除状态栏和标题栏，你只能操控的范围只有（320X430），而且坐标原点下移。记住咯。


//drawGraphics.java

package  com.scgm.android.drawable;

import android.graphics.Canvas;

 

 

public interface  drawGraphics {

public void  draw(Canvas canvas);

}



 

package  com.scgm.android.drawable;


import android.content.Context;

import  android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.view.View;


 


public classGameView  extends View  implements  Runnable{


        //声明Paint对象

       private  Paint mPaint= null;

       privatedrawGraphics drawGraphics= null;

 

      

       public GameView(Context context) {

            super(context);

           // TODOAuto-generated constructor stub

           //构建对象

           mPaint= new Paint();

           //开启线程

           new  Thread(this).start();

       }


       public void  onDraw(Canvas canvas) {

           super.onDraw(canvas);

           //设置画布为黑色背景

           //canvas.drawColor(Color.BLACK);

           //消除锯齿

           mPaint.setAntiAlias(true);

          //设置图形为空心

           mPaint.setStyle(Paint.Style.STROKE);

           //绘制空心几何图形

           drawGraphics=  new  DrawCircle();

           drawGraphics.draw(canvas);

           drawGraphics=  new  DrawLine();

           drawGraphics.draw(canvas);

           drawGraphics= newDrawRect();

           drawGraphics.draw(canvas);

       }

 

        

          @Override

          public void run() {

               // TODOAuto-generated method stub

               while(!Thread.currentThread().isInterrupted()) {

                    try{

                          Thread.sleep(1000);

                    } catch(InterruptedException e) {

                      // TODO: handle exception

                      Thread.currentThread().interrupt();

                    }

                     //使用postInvalidate 可以直接在线程中更新界面

                      postInvalidate(); 

               }

         }

 

}


//DrawRect.java

package com.scgm.android.drawable;


import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.RectF;


 

 

public class DrawRect  implements  drawGraphics{

 

       private  Paint paint=  null;

 

       public DrawRect(){

       paint= new  Paint();

}

 

      

         @Override

         public void  draw(Canvas canvas) {

             // TODOAuto-generated method stub

             //定义圆角矩形对象

             RectF rectF1 = newRectF(120,170,370,500);

             RectF rectF2 = newRectF(40,150,90,400);

             RectF rectF3 = newRectF(390,150,440,400);

             RectF rectF4 = newRectF(140,520,200,650);

             RectF rectF5 = newRectF(290,520,350,650);

             paint.setAntiAlias(true);

             //设置画笔颜色为BLUE

             paint.setColor(Color.GREEN);

             //在画布上绘制圆角矩形/圆弧/直线

             canvas.drawRoundRect(rectF1, 20, 20, paint);

             canvas.drawRoundRect(rectF2, 20, 20, paint);

             canvas.drawRoundRect(rectF3, 20, 20, paint);

             canvas.drawRoundRect(rectF4, 20, 20, paint);

             canvas.drawRoundRect(rectF5, 20, 20, paint);

        }

}


//DrawLine.java

package  com.scgm.android.drawable;


import android.graphics.Canvas;

import  android.graphics.Color;

import android.graphics.Paint;

 

 

public class DrawLine  implements  drawGraphics{

 

       private Paint paint=  null;

 

       public  DrawLine(){

           paint=  new  Paint();

       }

      

        @Override

        publicvoiddraw(Canvas canvas) {

            // TODOAuto-generated method stub

            paint.setAntiAlias(true);

            //绘制直线

            paint.setColor(Color.GREEN);

            //设置线条粗细

            paint.setStrokeWidth(12);

            canvas.drawLine(120,40,170,90, paint);

            canvas.drawLine(320,90,370,40, paint);

       }

}


//DrawCircle.java

package com.scgm.android.drawable;


import android.graphics.Canvas;

import  android.graphics.Color;

import  android.graphics.Paint;

import android.graphics.RectF;

 

 

public class DrawCircle  implements  drawGraphics{

 

        private  Paint paint=  null;

        private  Paint paint_eye=  null;

 

        public  DrawCircle(){

        paint= new  Paint();

        paint_eye= new  Paint();

}

      

        @Override

        public  void draw(Canvas canvas) {

             // TODOAuto-generated method stub

             //绘制圆形(圆心x，圆心y，半径r，画笔p)

             paint_eye.setAntiAlias(true);

             paint.setAntiAlias(true);

             RectF rectF = newRectF(120,60,370,240);

             paint_eye.setColor(Color.WHITE);

             paint.setColor(Color.GREEN);

             canvas.drawCircle(190, 110, 18, paint_eye);

             canvas.drawCircle(300, 110, 18, paint_eye);

             canvas.drawArc(rectF, 180, 180,true, paint);

        }

}


//GameStart.java

package  com.scgm.android.drawable;


import  android.app.Activity;

import android.os.Bundle; 


public class GameStart  extends  Activity {

 

      private  GameView mGameView=  null; 

 

    

      @Override

      public  void  onCreate(Bundle  savedInstanceState) { 

          super.onCreate(savedInstanceState);

          this.mGameView= newGameView(this);

          setContentView(mGameView);

      }

}



运行效果图：


                         画了个Android——Canvas类的使用



Percycj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决canvas画布使用fillRect()时高度出现双倍效果的问题
08-29
下面小编就为大家带来一篇解决canvas画布使用fillRect()时高度出现双倍效果的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
canvas标签导出图片时，设置图片背景为白色
qq_27453315的博客
06-01 2115
业务需求：利用canvas标签签名，导出成图片；因为png格式的图片背景透明的，所以需要将背景图片设置为白色。可以寻找图片中透明的pixel，将其变为白色的。转载于:https://www.cnblogs.com/qinmengjiao123-123/p/10300623.html。
运用样式与颜色 --Canvas的基本操作
chenzhao635的专栏
02-01 839
1.fillStyle 和 strokeStyle属性 如果想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。这两个属性的定义方法如下所示。 fillStyle = color strokeStyle = color strokeStyle是用于设置图形轮廓的颜色，而 fillStyle用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串、渐变...
【Canvas】常用颜色汇总
一念非凡(46岁待业程序员)
09-12 91
本文列出了Canvas画图时常用颜色，是给自己参考用的。
Canvas使用样式和颜色
ryan的博客
02-26 1750
1、色彩 默认色彩是黑色（#000000） fillStyle = color 设置图形的填充颜色。 strokeStyle = color 设置图形轮廓的颜色。 1.色板 function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i&...
Android笔记 自定义View（四）：Canvas使用之绘制背景色
热门推荐
u013135085的博客
07-25 2万+
前面介绍了Canvas和Paint的相关概念，下面就详细看下它们是怎么使用的 目录 一、绘制背景颜色 1、PorterDuffxfermode、Xfermode和PorterDuff Xfermode PorterDuffXfermode PorterDuff.Mode 二、总结 一、绘制背景颜色 Canvas绘制背景颜色常用有四个方法，具体看下面： //设置单一颜色为C...
canvas画布基本知识点总结
m0_47966287的博客
02-17 1186
List item
canvas的基本用法
weixin_43269800的博客
02-13 673
canvas的默认高宽 默认width：300px；默认height：150px； 什么是canvas（画布） <canvas>是HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图像； 例如：它可以用于绘制图形，创建动画。 <canvas>最早由Apple引入Webkit 使用<canvas>标签时，建议要成对出现，不要使用自闭合形式。 c...
Canvas色彩颜色
weixin_44966759的博客
09-22 1229
色彩 fillStyle和strokeStyle fillStyle=color 设置填充形状时使用的样式 strokeStyle=color 设置形状轮廓时填充的样式 color与css中的color一样 注意:这两个颜色设置一次后其后面的颜色默认是设置的颜色除非重新更改 ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 165, 0)'; ctx.fillStyle = 'rgba(255, 16
【canvas 背景色】透明背景转换成白色
南乡人的博客
03-30 7180
canvas 生成图片时，如果是 canvasDom.toDataURL('image/jpeg') 那么图片是黑色底的 如果是 canvasDom.toDataURL('image/png') 那么图片是透明底的 如果希望将图片的透明底色换成白底那么可以设置 const ctx = canvasDom.getContext('2d'); const imageData = ctx.getImageData(0, 0, canvasDom.width, canvasDom.height)
Canvas的基本使用
SpringQi
02-05 1172
（一）Canvas上的图形绘制 RectF mArcRect=new RectF(0,0,300,300); 1.绘制画布带透明度的颜色值 canvas.drawARGB(255,255,0,0); canvas.drawColor(Color.RED); 2.绘制矩形 canvas.drawRect(mArcRect,mPaint); canvas.drawRoundRect(mArcRect,...
Android Canvas画布使用Demo源码.rar
07-04
Android Canvas画布使用Demo源码.rar
Canvas画布全屏雪花背景特效特效代码
03-20
Canvas画布全屏雪花背景特效是一款全屏大雪纷飞动画背景特效下载。
HTML5 画布canvas使用方法
09-28
主要介绍了HTML5 画布canvas使用方法，canvas 是一个矩形区域，可以控制其每一像素，介绍了canvas的多种功能，感兴趣的小伙伴们可以参考一下
超爽的抽屉效果.zip
04-19
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台
关于学习C语言时写的代码.zip
04-19
C语言诞生于美国的贝尔实验室，由丹尼斯·里奇（Dennis MacAlistair Ritchie）以肯尼斯·蓝·汤普森（Kenneth Lane Thompson）设计的B语言为基础发展而来，在它的主体设计完成后，汤普森和里奇用它完全重写了UNIX，且随着UNIX的发展，c语言也得到了不断的完善。为了利于C语言的全面推广，许多专家学者和硬件厂商联合组成了C语言标准委员会，并在之后的1989年，诞生了第一个完备的C标准，简称“C89”，也就是“ANSI C”，截至2020年，最新的C语言标准为2018年6月发布的“C18”。 [5] C语言之所以命名为C，是因为C语言源自Ken Thompson发明的B语言，而B语言则源自BCPL语言。 1967年，剑桥大学的Martin Richards对CPL语言进行了简化，于是产生了BCPL（Basic Combined Programming Language）语言。
机械臂论文.doc
最新发布
04-19
机械臂论文.doc
S7200 and WINCC flexible.doc
04-19
S7200 and WINCC flexible.doc
27.大学生体质测试管理系统的设计与实现-Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文
04-19
27.大学生体质测试管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码（含数据库脚本）+开发文档+lw（高分毕设项目） 详细设计文档介绍链接：http://t.csdnimg.cn/jtyYh 内容概要： 系统主要分为系统管理员、教师和用户三个部分，系统管理员主要功能包括首页、个人中心、用户管理、教师管理、体质测试管理、测试报告管理、测试成绩管理、留言板、系统管理；基本上实现了整个大学生体质测试管理系统信息管理的过程。 全套项目源码+详尽文档，一站式解决您的学习与项目需求。 适用人群： 计算机、通信、人工智能、自动化等专业的学生、老师及从业者。 使用场景及目标： 无论是毕设、期末大作业还是课程设计，一键下载，轻松部署，助您轻松完成项目。 项目代码经过调试测试，确保直接运行，节省您的时间和精力。 其他说明： 项目整体具有较高的学习借鉴价值，基础能力强的可以在此基础上修改调整，以实现不同的功能。
多个canvas画布合并
06-09
要将多个canvas画布合并成一个画布，可以使用以下步骤： 1. 创建一个新的canvas画布，作为最终合并后的画布。 2. 获取每个要合并的canvas画布的像素数据。 3. 将每个canvas画布的像素数据绘制到新的canvas画布上。 4. 最后，将新的canvas画布插入到文档中。 以下是代码示例： ```javascript // 获取要合并的canvas画布 const canvas1 = document.getElementById('canvas1'); const canvas2 = document.getElementById('canvas2'); const canvas3 = document.getElementById('canvas3'); // 创建新的canvas画布 const mergedCanvas = document.createElement('canvas'); mergedCanvas.width = canvas1.width; mergedCanvas.height = canvas1.height; // 获取要绘制的上下文 const ctx = mergedCanvas.getContext('2d'); // 绘制第一个canvas画布 ctx.drawImage(canvas1, 0, 0); // 绘制第二个canvas画布 ctx.drawImage(canvas2, 0, 0); // 绘制第三个canvas画布 ctx.drawImage(canvas3, 0, 0); // 将新的canvas画布插入到文档中 document.body.appendChild(mergedCanvas); ``` 这样，就可以将多个canvas画布合并成一个画布了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值