Canvas画布

 canvas

使用 <canvas> 元素不是非常难但你需要一些基本的HTML和JavaScript知识。<canvas> 元素不被一些老的浏览器所支持，但是所有的主流浏览器的新近版本都支持。Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形，我们使用一个JavaScript上下文对象，它能动态创建图像（ creates graphics on the fly）。

  • canvas的默认宽高为：300x150
  • canvas在设置宽高时不能够使用css来设置宽高，如果使用css来设置宽高，那么图像会缩放，不会变大
  • 如果浏览器不支持canvas，会显示canvas标签之间的内容
  • 得到上下文对象时，一般我们传入的是“2d”,2d指的是可以绘制平面图形，如果在绘制3d图形，传入“webgl”
  • 通过getContext方法得到一个CanvasRenderingContext2D对象，这个对象就是操作canvas的一个上下文对象（工具集）。
  • 如果给canvas在js代码中重新设置宽高，将来canvas中的内容会被清空

canvas的API:

 方法：

  • getContext("2d"):得到上下文对象
  • moveTo()：将画笔移动到某一点
  • lineTo()：确定要连接的另一点
  • stroke()：将以上所有的路径连接起来
  • fill()：将以上所有的路径组成的图形填充起来

    <canvas id="cas">
        如果浏览器不支持canvas，会显示这段内容
    </canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //1.1给画布设置宽高：
        cas.width = 600;
        cas.height = 300;
        //2.0得到绘制上下文对象
        var ctx = cas.getContext("2d");
        //3.0将点移动到100，100位置
        ctx.moveTo(100,100);//将画笔移动到100，100的位置
        //4.0将线的终点也标记出来
        ctx.lineTo(200,100);//标记另一点200，100并且记录，将来以上两点要用线连接起来
        //5.0将所有的描点链接起来
        ctx.stroke();
    </script>

　　非零环绕原则：

  • closePath：将所有的路径闭合起来
  • setLineDash():用来设置虚线（它里面要传入一个参数，参数的类型是数组）\
  • getLineDash():得到传入的虚线数组

    <canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 600;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        ctx.moveTo(100,100);
        ctx.lineTo(500,100);
        ctx.lineTo(500,500);
        ctx.lineTo(100,500);
        ctx.closePath();

        ctx.moveTo(250,250);
        ctx.lineTo(250,350);
        ctx.lineTo(350,350);
        ctx.lineTo(350,250);
        ctx.closePath();

        ctx.stroke();
        ctx.fill();
    </script>

属性：

  • lineWidth：设置路径的宽度
  • lineDashOffset：设置虚线的偏移距离
  • strokeStyle：设置线段描   边的颜色
  • fillStyle:  设置路径所围区域的颜色

    <canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 300;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        ctx.moveTo(250,100);
        ctx.lineTo(350,100);
        ctx.lineTo(350,200);
        ctx.lineTo(250,200);
        ctx.closePath();

        ctx.lineWidth = 20;
        // ctx.strokeStyle = "red";
        // ctx.strokeStyle = "#0f0";
        ctx.strokeStyle = "rgb(0,0,255)";
        ctx.fillStyle = "pink";

        ctx.stroke();
        ctx.fill();
    </script>
  1. 绘制一个折线图

    <canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 600;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0绘制坐标系
        var paddingTop;
        var paddingBottom;
        var paddingRight;
        var paddingLeft;
        var arrW = 10;
        var arrH = 26;
        paddingTop = paddingBottom = paddingRight = paddingLeft = 30;
        var x0 = paddingLeft;
        var y0 = cas.height - paddingBottom;
        //4.1绘制轴线
        ctx.beginPath();
        ctx.moveTo(x0,paddingTop);
        ctx.lineTo(x0,y0);
        ctx.lineTo(cas.width - paddingRight,y0);
        ctx.stroke();

        //4.2绘制箭头
        ctx.beginPath();
        ctx.moveTo(x0,paddingTop);
        ctx.lineTo(x0 - arrW / 2 , paddingTop + arrH);
        ctx.lineTo(x0 , paddingTop + arrH / 2);
        ctx.lineTo(x0 + arrW / 2 , paddingTop + arrH);
        ctx.closePath();

        ctx.moveTo(cas.width - paddingRight,y0);
        ctx.lineTo(cas.width - paddingRight - arrH , y0 - arrW / 2);
        ctx.lineTo(cas.width - paddingRight - arrH / 2 , y0);
        ctx.lineTo(cas.width - paddingRight - arrH , y0 + arrW / 2);
        ctx.closePath();
        ctx.fill();
        //4.3绘制坐标上的小点：
        var l = 8;
        var points = [[10,10],[15,30],[30,5],[50,8],[55,40]];//二维数组。
        for(var i =  0 ; i < points.length ; i ++ ) {
            //取出对应点的x，y
            var pX = points[i][0];
            var pY = points[i][1];
            //将圆点由自己的圆点切换成画布的左上角
            pX = x0 + points[i][0];
            pY = y0 - points[i][1];
            //根据x,y绘制小点(绘制一个矩形)
            ctx.beginPath();
            ctx.lineWidth = 4;
            ctx.moveTo(pX - l / 2,pY - l / 2);
            ctx.lineTo(pX + l / 2,pY - l / 2);
            ctx.lineTo(pX + l / 2,pY + l / 2);
            ctx.lineTo(pX - l / 2,pY + l / 2);
            ctx.closePath();
            ctx.stroke();

        }
    </script>
  2. 绘制矩形：

    canvasRenderingContext2D.rect(x,y,width,height);//绘制矩形

x,y起点的坐标

width,height矩形对应的宽高

这个方法只会设置矩形的路径，不会进行填充或者是描边(不建议使用这个方法因为它如果要填充或者是描边，还需要借助:fill(),stroke();

   canvasRenderingContext2D.strokeRect(x,y,width,height);:

  作用：描边一个矩形

canvasRenderingContext2D.fillRect(x,y,width,height);

  作用：填充一个矩形

   canvasRenderingContext2D.clearRect(x,y,width,height);

    作用：清除一个矩形区域

<canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 600;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0直接使用canvas中的方法来绘制矩形：（100，100），200，100
        ctx.rect(100,100,200,100);
        // ctx.stroke();
        ctx.fill();
        ctx.strokeRect(100,250,200,100);
        ctx.fillRect(100,400,200,100);
        //清除一个矩形区域：
        ctx.clearRect(120,120,50,50);
        ctx.clearRect(200,150,80,300);
        ctx.clearRect(0,0,cas.width,cas.height);
        // cas.width = width;
        // cas.height = height;
    </script>

　　3.绘制圆弧：

  canvasRenderingContext2D.arc(x,y,radius,beginAngle,endAngle,anticlockwise);

作用：绘制一段圆弧

   参数：

x,y绘制圆弧的起始坐标

radius:圆弧的半径

beginAngle:开始的弧度(不是角度)

endAngle:结束的弧度（不是角度）

anticlockwise：判断是否是逆时针(这个参数是可选参数，默认值为false，说明绘制方法是顺时针绘制，如果设置为true,那么绘制方法改为逆时针)

 注意：

1）arc需要配合fill或者是stroke方法来进行绘制

2）arc方法的0度角是水平向右

3）arc方法要配合moveTo方法来使用

<canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 600;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0绘制一个圆
        ctx.arc(300, 300, 100, 0, 2 * Math.PI);
        ctx.stroke();
    </script>
<canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 600;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0使用arc方法来绘制一个圆形
        // ctx.arc(300,300,100,0,2*Math.PI);
        // ctx.stroke();
        //角度转弧度：
        function toRadian( angle) {
            return angle * Math.PI / 180;
        }
        //弧度转角度：
        function toAngle (radian) {
            return radian * 180 / Math.PI;
        }
        //4.1绘制一个圆弧
        ctx.moveTo(300,300);
        ctx.arc(300,300,100,0, toRadian(90));
        ctx.closePath();
        ctx.stroke();
    </script>

 canvasRenderingContext2D.arcTo(x,y,x1,y1,radius):

 作用：绘制一段与线段相切的圆弧

  参数：

x,y起点坐标

x1,y1终点坐标

radius:半径

<canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 300;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0绘制一段与线段相切的圆弧
        var r = 50;
        ctx.moveTo(20,20);
        ctx.arcTo(170,20,170,70,r);
        ctx.lineTo(170,170);
        ctx.stroke();
    </script>

　　圆角矩形

<canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 300;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0绘制四条不相交的线段
        ctx.moveTo(100,100);
        ctx.lineTo(300,100);
        ctx.arcTo(90,100,90,110,10);
        ctx.moveTo(310,110);
        ctx.lineTo(310,210);
        // ctx.arcTo(310,100,310,110,10);
        ctx.arcTo(310,100,300,100,10);
        ctx.moveTo(300,220);
        ctx.lineTo(100,220);
        ctx.arcTo(310,220,310,210,10);
        ctx.moveTo(90,210);
        ctx.lineTo(90,110);
        ctx.arcTo(90,220,100,220,10);
        ctx.stroke();
    </script>

　　4.绘制文本

  canvasRenderingContext2D.strokeText(text, x, y);

  作用:在页面上绘制一段文本（将文本进行描边）

  参数：

text:绘制的文本

x,y文本绘制的位置

  注意：

1）默认情况下绘制出来的文本会靠近点的右上方显示

2）strokeText是空心的，fillText是实心的

<canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 300;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0在canvas中绘制Hello Wrold
        var str = "Hello World";
        var x = 100;
        var y = 100;
        ctx.font = "30px ‘楷体‘";
        ctx.strokeText(str,x,y);
        ctx.arc(x,y,2,0,2*Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.fillText(str,x,y + 100);
        ctx.arc(x,y + 100,2,0,2*Math.PI);
        ctx.stroke();
    </script>

canvasRenderingContext2D.fillText(text, x, y);

     作用：在页面上绘制一段文本（将文本进行填充）

  CanvasRenderingContext2D.textAlign:

 作用：设置文本水平方向上的位置

 取值：

left:默认

right:靠右显示

center:居中显示

  CanvasRenderingContext2D.textBaseline

   作用：设置文本垂直方向上的位置

取值：

baseLine:

middle:

bottom:

top:

CanvasRenderingContext2D.measureText()：

  作用：得到一个对象，这个对象可以帮助我们得到文本的宽度。

<canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 600;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0在canvas中绘制Hello Wrold
        var str = "Hello World";
        var x = 300;
        var y = 100;
        ctx.font = "18px ‘楷体‘";
        //设置文本水平方向上的位置：textAlign
        // ctx.strokeText(str,x,y);
        // ctx.moveTo(x,0);
        // ctx.lineTo(x,300);
        // ctx.stroke();
        // ctx.beginPath();
        // ctx.textAlign = "right";
        // ctx.strokeText(str,x,y+50);
        // ctx.beginPath();
        // ctx.textAlign = "center";
        // ctx.strokeText(str,x,y+100);
        //设置文本垂直方向上的位置：textBaseline
        // ctx.beginPath();
        // ctx.moveTo(0,300);
        // ctx.lineTo(600,300);
        // ctx.stroke();
        // ctx.fillText(str, 0 ,300);
        // //top, middle, bottom
        // ctx.beginPath();
        // ctx.textBaseline = "top";
        // ctx.fillText(str, 150,300)
        // ctx.beginPath();
        // ctx.textBaseline = "middle";
        // ctx.fillText(str, 300,300)
        ctx.beginPath();
        ctx.textBaseline = "bottom";
        ctx.fillText(str, 450,300)
        //得到文本的宽度：
        var size = ctx.measureText(str);
        alert(size.width)
    </script>

　　5. 绘制图形
　　如果要绘制图片，必须先得到一张图片，得到图片的方式有两种：
　　第一种：直接从dom元素中取
　　第二种：使用new关键字new出来
　　　　CanvasRenderingContext2D.drawImage( img, dx, dy )

作用：在canvas中绘制一张图片

　　参数：
　　　　img：要绘制的图片对象
　　　　dx，dy：图片在canvas中的绘制位置
　　　　CanvasRenderingContext2D.drawImage( img, dx, dy , dWidth, dHeight )

<canvas id="cas"></canvas>
    <!-- <img src="imgs/1.jpg"  id="img"> -->
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 600;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0绘制一张图片
        //4.1得到图片对象的第一种方式
        // var img = document.getElementById("img");
        // //如果要绘制这张图片必须保证图片已经被正常加载出来了
        // img.onload = function(){
        //     //4.2使用drawImage方法绘制图片
        //     ctx.drawImage(img, 100, 100);
        // }
        //4.2得到图片对象的第二种方式
        var img = new Image();//创建一个图片对象
        img.src = "imgs/1.jpg";//给对象添加一个路径属性，将来这张图片就是这个路径下面的图片
        img.onload = function(){
            ctx.drawImage(img,200,200);
        }
    </script>

　　

　　作用：在canvas中绘制一张图片
　　参数：
　　　　img：要绘制的图片对象
　　　　dx，dy：图片在canvas中的绘制位置
　　　　dWidth, dHeight:给绘制图片设置宽高
　　　　CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy , dWidth, dHeight )
　　

canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 600;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0得到图片对象
        var img = new Image();
        img.src = "imgs/2.jpg";
        img.onload = function(){
            ctx.drawImage(img,0,0,600, 600 * this.height / this.width);
        }

    </script>

作用：在canvas中绘制一张图片
　　参数：
　　　　img：要绘制的图片对象
　　　　sx,sy：从要绘制图片中裁剪的图片起始坐标
　　　　sWidth,sHeight:从要绘制的图片中裁剪的图片宽高
　　　　dx，dy：图片在canvas中的绘制位置
　　　　dWidth, dHeight:给绘制图片设置宽高

<canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 600;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0得到一个图片对象
        var img = new Image();
        img.src = "imgs/2.jpg";
        img.onload = function(){
            // ctx.drawImage( img, 719, 264, 43, 75, 100, 100, 200, 200 * 75 / 43);
            ctx.drawImage(img, 719 , 264, 43, 75, 100, 100, 43, 75);
        }

    </script>

　　6. 变换
　　在canvas中如果要绘制图形，坐标系起着至关重要的作用。在canvas中为了能够绘制出更多图形来，canvas为我们准备一系列的变换方法。
　　作用：可以使用变换帮助我绘制更多类型的图形。

　　translate(); 平移变换
　　scale(); 伸缩变换
　　rotate(); 旋转变换
　　变换以后的坐标系会影响后面结构

<canvas id="cas"></canvas>
    <script>
        //角度转弧度：
        function toRadian(angle) {
            return angle * Math.PI / 180;
        }
        //弧度转角度
        function toAngle (radian) {
            return radian * 180 / Math.PI;
        }
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 300;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //4.0在canvas中心绘制一个矩形
        //4.1将坐标平移到画布中心位置
        ctx.translate( cas.width / 2, cas.height / 2);
        //4.2绘制矩形
        var l = 100;
        var x = -l / 2;
        var y = -l / 2;
        var angle = 2;
        var speed = 1000;
        setInterval(function() {
            //先清除画布内容
            ctx.clearRect( -cas.width / 2, -cas.height / 2, cas.width, cas.height);
            //旋转
            ctx.rotate(toRadian(angle));
            //绘制矩形
            ctx.strokeRect( x, y, l, l);
            // angle ++;
        }, 1000 / speed);
    </script>

　　7. 状态的保存和恢复

　　在canvas中所有的状态属性都会一直保存下去，影响下面代码的样式，所以为了 解决这个问题，我们可以进行状态的保存的恢复。

　　save(); //将之前的状态保存起来
　　restore(); //将上一次保存的状态恢复过来

    <canvas id="cas"></canvas>
    <script>
        //1.0得到canvas对象
        var cas = document.getElementById("cas");
        //2.0设置宽高
        cas.width = 600;
        cas.height = 300;
        //3.0得到上下文对象
        var ctx = cas.getContext("2d");
        //当代码运行到这里的时候，我们的canvas中属性的状态，全部是默认的
        //我希望在这里把所有的默认状态全部保存起来
        ctx.save();
        //4.0绘制一个矩形（描边红色，填充绿色，线宽10）
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 10;
        ctx.rect(100,100,100,100);
        ctx.stroke();
        ctx.fill();
        //当代码运行到这里的时候，我们的canvas中属性的状态被修改了
        //我们希望在这里把之保存的状态恢复过来
        ctx.restore();
        //5.0绘制第二个矩形（所有样式我都希望是默认的）
        ctx.beginPath();
        ctx.rect(300,100,100,100);
        ctx.stroke();
        ctx.fill();
    </script>
时间： 2024-10-17 22:58:14

Canvas画布的相关文章

将Canvas画布内容保存为jpg格式图片

/// <summary>        /// 功能:将Canvas画布内容保存为jpg格式图片        /// 作者:GYS | 日期:2013年9月9日        /// </summary>        /// <param name="filePath"></param>        /// <param name="pixBox"></param>        pri

如何在html5的canvas画布中绘制gif动态图片

我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等),直接用canvas中的drawImage方法即可,那么如何绘制动态图片(gif)? 相信大家都知道动态图片之所以动态,是因为它是由很多图片按一定的帧数顺序播放而成的,因此我们是否也可以模拟这样的帧数,每隔一定的时间重新 绘制图片,就能画出动态图片呢?答案当然是YES.下面就是我自己测试的一个例子,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 &l

用canvas画布画一个画板

前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 制作画板</title> <style> h1

JavaScript之Canvas画布

canvas可以在页面中设定一个区域,再利用JavaScript动态地绘制图像. 基本用法 使用canvas元素,首先设置width和height属性,为其设置绘制区域的大小,   如果没有设置宽度和高度,是看不到元素的,不能在其区域画图,在开始标签和结束标签之间的信息是后备信息,当用户的浏览器不支持canvas元素时会显示,用于友好地提示用户. <canvas id="canvas" width="400" height="300">

Particles.js基于Canvas画布创建粒子原子颗粒效果

文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针. 使用方法 1.该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 2.在页面中使用一个div来作为放置粒子的容器

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制四分之一圆(3)

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body&g

【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）

1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十六进制形式表示(ARGB) drawText(String text,float x,float y,Paint paint) 作用:绘制文本字符 第一个参数:文本内容 第二.三个参数:文本的X.Y坐标 第四个参数:画笔实例 drawPoint(float x,float y,Paint paint

02 Canvas画布

学习笔记适合新手,如有错误请指正.?号处也请各位指点下,谢谢. Canvas画布是承载所有UI元素的区域 所有的UI元素都必须是Canvas的子对象 创建画布: 点击导航菜单>“GameObject”>”UI“>“Canvas”导航栏 Render Mode:渲染模式(Screen Space—Overlay.Screen Space—Camera.World Space) Pixel Perfect:只有RenderMode为Screen类型才有的选项,使UI元素像素对应,效果是边缘清

【一天一个canvas】Canvas画布调整之移动、缩放、旋转（九）

有些人有些不解,为什么Canvas的坐标是从左上角开始的,而且向下是Y的正方向,向右是X的正方向?其实我也很不理解~~ 为什么就不能给我们更多的自定义功能呢?下面我改写了一段Canvas画布调整的代码,包含了Canvas画布的移动.缩放和旋转等相关功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style type="text/c

第六章 一张白纸好作画—Canvas画布（1）

第六章 一张白纸好作画-Canvas画布 前面的相关章节,我们详细说明过Android UI组件的使用.通过前面章节的学习,开发者已经可以开发出令人满意的UI效果了.但是有的时候,我们需要实现更加漂亮的UI效果,此时可能就无法直接使用UI组件,而是需要自己画出各种UI效果了. 在Android中,Canvas就是一个画布,开发者可以在画布上绘制想要的任何东西.在本章中,我们将介绍Canvas及相关的技术. 6.1 Canvas画布介绍 6.1.1View Canvas-使用普通View的Canv