canvas的用法

想要使用canvas 有一个前提 那就是一定要有它要操作的对象 bitmap 或 一块dirty区域。


android 源码中 view的根 canvas 来源如下:ViewRootImpl.java 

drawSoftware方法中:

 canvas = mSurface.lockCanvas(dirty);


用canvas工具渲染bitmap: 画圆

int radius = src.getWidth() / 2; //src为我们要画上去的图,跟上一个示例中的bitmap一样。
Bitmap dest = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(dest);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
Path path = new Path();
path.addCircle(radius, radius, radius, Path.Direction.CW);
c.clipPath(path);   //裁剪区域
c.drawBitmap(src, 0, 0, paint);  //把图画上去



好的,以下是canvas的基本使用方法: 1. 创建canvas元素:首先在HTML页面中创建一个canvas元素,可以使用标签`<canvas>`或JavaScript代码动态创建,例如: ```html <canvas id="myCanvas"></canvas> ``` ```javascript const canvas = document.createElement('canvas'); canvas.id = 'myCanvas'; document.body.appendChild(canvas); ``` 2. 获取canvas上下文:使用JavaScript代码获取canvas元素的上下文(context),可以通过上下文对象对canvas进行绘制,例如: ```javascript const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); ``` 上面的代码获取了一个2D上下文对象,可以使用该对象进行2D绘图。 3. 绘制图形:使用canvas的上下文对象进行绘制,可以绘制直线、矩形、圆形、文本等各种图形,例如: ```javascript const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); context.fillStyle = 'red'; // 设置填充颜色 context.fillRect(10, 10, 100, 100); // 绘制矩形 context.strokeStyle = 'green'; // 设置线条颜色 context.lineWidth = 5; // 设置线条宽度 context.strokeRect(20, 20, 80, 80); // 绘制矩形边框 context.beginPath(); // 开始路径 context.arc(60, 60, 30, 0, Math.PI * 2); // 绘制圆形 context.closePath(); // 结束路径 context.fill(); // 填充圆形 context.stroke(); // 绘制圆形边框 context.font = '20px Arial'; // 设置字体 context.fillStyle = 'blue'; // 设置文本颜色 context.fillText('Hello, world!', 20, 100); // 绘制文本 ``` 上面的代码绘制了一个红色的矩形,绿色的矩形边框,蓝色的文本和一个填充和边框都为黑色的圆形。 4. 清空canvas:使用canvas的上下文对象可以清空canvas,可以使用`clearRect()`方法清空整个canvas,或者使用`fillRect()`或`strokeRect()`方法覆盖原有图形,例如: ```javascript const canvas = document.getElementById('myCanvas'); const context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); // 清空整个canvas context.fillRect(0, 0, canvas.width, canvas.height); // 使用黑色矩形覆盖原有图形 ``` 上面的代码清空了整个canvas,并使用黑色矩形覆盖原有图形。 以上是canvas的基本使用方法,希望能够帮助您入门canvas绘图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值