关闭

canvas的一些有用的使用小结

1259人阅读 评论(0) 收藏 举报
分类:


canvas可以看做是一台打印机,bitmap是好比纸,paint是墨水,打印机使用不同的墨水在不同的纸上绘制,而canvas本身自带有纸了,但你也可以指定它在你指定的纸上绘制。

1.canvas.save()方法:

这个方法调用后会保存调用这个方法前的状态,相当于调用了这个方法后重新铺上了一个新的图层,之后的绘制会在新的图层,不会对之前的绘制造成影响。

2.canvas.restore(); 方法:

调用了save的方法后在新的图层里绘制,绘制完后调用这个方法会重新回到save之前的图层。所以这里与save的方法是一起使用的,就类似与图层栈的入栈与出栈,所以这个方法调用的次数必须要比save调用的次数少。 这两个方法的作用,举个例子:绘画了一个部分后,想对接下来的绘画具有缩放效果,为了不影响前面的,调用是save的方法,然后使用缩放的方法绘制,绘制后下想返回,就调用这个方法,那么之后的绘制就没有缩放的效果了。


3.canvas.rotate 方法:

这个可以使图层旋转,好处举个例子:画个时钟的刻度,你只要指定一个刻度的绘画线就可以了,然后选择角度继续一样的绘画就可以了,与ps绘画相似。

4.canvas.translate 方法:

这个可以使图层移动,举个例子,你想从某个位置上划线,你不知道终点坐标,只指定划线长度,那么将起点移动到这个位置,那么相当于从(0,0)位置上划线,结合save与restore的方法,可以使绘画很方便。

举个例子:
 int w = getWidth();
        int h = getHeight();
        Paint p = new Paint();
        p.setColor(Color.parseColor("#00bcd4"));
        canvas.drawCircle(w / 2, h / 2, 150, p);
        p.setColor(Color.WHITE);
        canvas.drawCircle(w / 2, h / 2, 140, p);
        p.setColor(Color.BLACK);
        p.setStrokeWidth(4);
        for (int i = 0; i < 12; i++) {
            canvas.drawLine(w / 2 - 140, h / 2, w / 2 - 130, h / 2, p);
            canvas.rotate(360 / 12, w / 2, h / 2);
        }

        canvas.save();
        canvas.translate(w / 2, h / 2);
        canvas.drawLine(0, 0, 20, 0, p);
        canvas.drawLine(0,0,0,50,p);
        canvas.restore();


效果如下:




4.结合Matrix的使用


Matrix的对图像的处理可分为四类基本变换:

Translate 平移变换

Rotate 旋转变换

Scale 缩放变换

Skew 错切变换


5.canvas.clipRect


canvas裁剪:有6种裁剪,分别是:


Region.Op.DIFFERENCE   显示裁剪区以外的部分

测试代码:
<pre name="code" class="java">canvas.drawColor(Color.GRAY);
        Paint p=new Paint();
        canvas.clipRect(50, 50, 200, 300, Region.Op.DIFFERENCE       );
        p.setAntiAlias(true);
        Rect rect=new Rect();
        rect.set(50, 50, 200, 400);
        p.setColor(Color.RED);
        canvas.drawRect(rect, p);
        p.setColor(Color.parseColor("#00bcd4"));
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);




效果如下:




Region.Op.REPLACE     是显示裁剪区以内的部分

测试代码:
<pre name="code" class="java"> canvas.clipRect(50, 50, 200, 300, Region.Op.REPLACE  );
        p.setAntiAlias(true);
        Rect rect=new Rect();
        rect.set(50, 50, 200, 400);
        p.setColor(Color.RED);
        canvas.drawRect(rect, p);
        p.setColor(Color.parseColor("#00bcd4"));
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);



效果如下:




Region.Op.REVERSE_DIFFERENCE   两次裁剪区域的的差集部分:
 Paint p=new Paint();
        canvas.clipRect(50, 50, 200, 300, Region.Op.REVERSE_DIFFERENCE  );
        canvas.clipRect(50, 50, 100, 200, Region.Op.REVERSE_DIFFERENCE  );
        p.setAntiAlias(true);
        Rect rect=new Rect();
        rect.set(50, 50, 200, 400);
        p.setColor(Color.RED);
        canvas.drawRect(rect, p);
        p.setColor(Color.parseColor("#00bcd4"));
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);






Region.Op.INTERSECT   两次裁剪区域的交集部分:

代码如下:

<pre name="code" class="java">canvas.drawColor(Color.GRAY);
        Paint p=new Paint();
        canvas.clipRect(50, 50, 200, 300, Region.Op.INTERSECT      );
        canvas.clipRect(50, 50, 100, 200, Region.Op.INTERSECT        );
        p.setAntiAlias(true);
        Rect rect=new Rect();
        rect.set(50, 50, 200, 400);
        p.setColor(Color.RED);
        canvas.drawRect(rect, p);
        p.setColor(Color.parseColor("#00bcd4"));
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);



效果如下:





Region.Op.UNION  两次裁剪的并集


Region.Op.XOR  补集 就是全集的减去交集生育部分显示





6.canvas.clipPath 方法:

注意的是,这里的path应该是一个封闭的路径。

代码如下:

Bitmap b= BitmapFactory.decodeResource(getResources(), R.mipmap.pic);
        canvas.drawColor(Color.GRAY);
        Paint p=new Paint();
        Path path = new Path();
        path.addCircle(getWidth() /2, getHeight()/2,155, Path.Direction.CW);
        canvas.clipPath(path,Region.Op.INTERSECT);

        p.setAntiAlias(true);
        Rect rect=new Rect();
        rect.set(50, 50, 200, 400);
        p.setColor(Color.RED);
        canvas.drawRect(rect, p);
        p.setColor(Color.parseColor("#00bcd4"));
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, 150, p);


效果如下:







0
0
查看评论

打印canvas的内容

打印  不被打印区域   JavaScript">        function fun(id){         return documen...
  • github_36085116
  • github_36085116
  • 2017-02-10 16:48
  • 798

html5 实现动态网页截屏 页面生成图片并打印(图文)

html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。 因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。 环境要求: jQuery 兼容性: Firefox 3.5+, Chrome, Opera, IE9
  • lu8000
  • lu8000
  • 2015-03-12 11:58
  • 13005

网页打印的通用方法之canvas转换篇

我们做网站,经常需要打印页面指定区域的内容,而网上关于这块的说法很多,各种各样的打印控件也不少。但许多打印方案都不怎么好,至少我不喜欢,要么封装复杂,要么难以维护。         之前写了一个通用打印方法,是基于网上的一个最简洁的打印插件,然后添加了自己的...
  • foren_whb
  • foren_whb
  • 2018-01-05 13:50
  • 129

每日一个js实例15--canvas绘图内容打印

打印 不被打印区域          function fun(id){return document.getElementById(id);}     var canvas=fun("...
  • yk890303
  • yk890303
  • 2016-12-09 09:23
  • 1640

用Javascript实现让Canvas变模糊的效果

做Canvas应用的开发,可能会碰到需要使画面模糊的需求。 容易想到三种方式: 1、半透明模糊 PNG 覆盖的方式,这种方式简单易行,但是不能灵活控制模糊程度。 2、CSS方式,比如用-webkit-filter:blur(10px); 的形式,也极其简单,可控制模糊程度,但是这种方...
  • cuixiping
  • cuixiping
  • 2012-07-17 15:35
  • 9331

基于canvas画布的星空效果

canvas是html5的新标签,其画布功能尤为强大。当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性。这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这个源代码是网上下载的,我把它整合了一下,重新封装一些参数提供更多的可改项。 首先引入两个javas...
  • u014725878
  • u014725878
  • 2016-12-01 16:52
  • 4015

167种html5canvas图片切换特效

  • 2016-10-16 20:52
  • 17.81MB
  • 下载

纯JavaScript实现HTML5 Canvas六种特效滤镜

纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfishfilter.js。支持的特效滤镜分别为: 1.  ...
  • jia20003
  • jia20003
  • 2013-06-28 13:23
  • 22279

Canvas 效果实例

1.前言在上一篇文章,HTML 5 动态效果制作方法整理中,我们分别介绍了前端开发中常用的几种动态效果的做法。其中,关于 Canvas 是现在非常流行,并且也被广泛运用的一种技术。那今天就一起来跟着我学习一下,如何实现下面的这个图片吧。2.前期准备我们的 Canvas 更擅长绘制大量的效果,例如我们...
  • MR_LP
  • MR_LP
  • 2016-11-28 17:34
  • 2089

CANVAS的使用详解

由于在网络上找到关于Canvas的使用都比较抽象,也许是我的逻辑思维不太好吧,总是感觉理解起来比较困难, 尤其是对save()和restore()方法的使用。本篇文章的内容就是对Canvas的使用进行一下总结,包括它的两种不同的使用 情节和它的一些方法进行一下说明。  1 ...
  • It_BeeCoder
  • It_BeeCoder
  • 2017-01-08 14:36
  • 319
    个人资料
    • 访问:104297次
    • 积分:2138
    • 等级:
    • 排名:千里之外
    • 原创:113篇
    • 转载:20篇
    • 译文:0篇
    • 评论:107条
    最新评论