单元7网页图形绘制与游戏设计；本单元通过网页图形绘制与游戏设计的探析与训练，重；【教学导航】；【实例探析】；【任务7-1】探析网页中菊花图形的绘制；【效果展示】；网页0701.html中绘制菊花图形的浏览效果如；图7-1网页0701.html中绘制菊花图形的浏；【网页探析】；1．网页0701.html中菊花图形绘制的HTM；网页0701.html中菊花图形绘
单元7 网页图形绘制与游戏设计
本单元通过网页图形绘制与游戏设计的探析与训练，重点学习HTML5中的&canvas&标签、画布与画笔、坐标与路径、各种网页图形的绘制、图片的绘制、阴影效果和颜色渐变效果的设置等，学会应用&canvas&标签以及相关属性和方法进行网页图形绘制与游戏设计。
【教学导航】
【实例探析】
【任务7-1】探析网页中菊花图形的绘制
【效果展示】
网页0701.html中绘制菊花图形的浏览效果如图7-1所示。
图7-1 网页0701.html中绘制菊花图形的浏览效果
【网页探析】
1．网页0701.html中菊花图形绘制的HTML代码探析
网页0701.html中菊花图形绘制的HTML代码如表7-1所示。
2．网页0701.html中菊花图形绘制的JavaScript代码探析
网页0701.html中菊花图形绘制的JavaScript代码如表7-2所示。
【任务7-2】探析网页中精美挂钟的绘制
【效果展示】
网页0702.html中精美挂钟的浏览效果如图7-2所示。
图7-2 网页0702.html中精美挂钟的浏览效果
【网页探析】
1．网页0702.html中精美挂钟绘制的HTML代码探析
网页0702.html中精美挂钟绘制的HTML代码如表7-3所示。
2．网页0702.html中精美挂钟绘制的JavaScript代码探析
网页0702.html中精美挂钟绘制的JavaScript代码如表7-4所示。
【知识疏理】
1．HTML5的&canvas&标签
&canvas&标签用于在网页上绘制图形。&canvas&标签只是定义图形容器（画布），必须使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2．HTML5的画布与画笔
Canvas意为画布也，而Html5中的Canvas也真的跟现实生活中的画布非常相似，所以，把他看成一块实实在在的画布可以方便理解。
用canvas作画，首先，需要有一块“画布”，即创建一个canvas即可。
创建好了画布后，让我们来准备画笔，创建context对象，使用getContext()方法从画布中得到二维绘制对象的代码如下：
var context = myCanvas.getContext(&2d&);
getContext(&2d&)对象是HTML5的内建对象，拥有多种绘制路径、矩形、圆形、字符
以及添加图像的方法，在JavaScript中通过操作它即可以在Canvas画布中绘制所需的图形。
3．HTML5的坐标与路径
2d世界就是平面，在一个平面上确定一个点，需要两个值：x坐标和y坐标。canvas的原点是左上角，跟flash一样。上面的fillRect方法拥有参数 (0,0,80,100)，意思是在画布上绘制80×100的矩形，从左上角开始(0,0)。
如图7-3所示，画布的X和Y坐标用于在画布上对绘画进行定位。
图7-3 HTML5图形绘制的坐标与原点
在Canvas中，所有基本图形都是以路径为基础的，通常使用Context对象的moveTo()、lineTo()、rect()、arc()等方法先在画布中描出图形的路径点，然后使用fill()或者stroke()方法依照路径点来填充图形或者绘制线条。
① 开始与关闭：beginPath、closePath
beginPath()：开始绘制一个新路径。
closePath()：通过绘制一条当前点到路径起点的线段来闭合形状。
这两个方法分别用来通知Context开始一个新的路径和关闭当前的路径。
② 移动与直线：moveTo、lineTo, rect
void moveTo(in float x, in float y);
moveTo方法用于显式地指定路径的起点。默认状态下，第一条路径的起点是画布的(0, 0)点，之后的起点是上一条路径的终点。两个参数分为表示起点的x、y坐标值。
③ 曲线：arcTo、arc、quadraticCurveTo、bezierCurveTo
void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
arcTo方法用于绘制一个与两条线段相切的圆弧，两条线段分别以当前Context绘制起点和(x2, y2)点为起点，都以(x1, y1)点为终点，圆弧的半径为radius。绘制完成后绘制起点会移动到以(x2, y2)为起点的线段与圆弧的切点。
void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in
boolean anticlockwise);
arc方法用于绘制一个以(x, y)点为圆心，radius为半径，startAngle为起始弧度，endAngle为终止弧度的圆弧。参数中的两个弧度以0表示0°，位置在3点钟方向；Math.PI值表示180°，位置在9点钟方向。
④ fill、stroke、clip
路径绘制完成后，需要调用Context对象的fill()和stroke()方法来填充路径和绘制路径线条，或者调用clip()方法来剪辑Canvas区域。
⑤ clearRect、fillRect、strokeRect
这三个方法并不是路径方法，而是用来直接处理Canvas上的内容，相当于Canvas的背景，调用这三个方法也不会影响Context绘图的起点。
4．图形绘制的风格设置属性
Context对象还提供了相应的属性来调整线条及填充风格，如表7-6所示。
5．绘制矩形
Context对象拥有3个方法可以直接在画布上绘制图形而不需要路径，可以将其视为直接在画布背景中绘制。这3个方法的原型如下：
（1）void fillRect(left, top,width, height);
用于使用当前的fillStyle（默认为“#000000”，黑色）样式填充一个左上角顶点在（left, top）点、宽为width、高为height的矩形。
（2）void strokeRect(left, top,width, height);
用于使用当前的线条风格绘制一个左上角顶点在(left, top)点、宽为width、高为height的矩形边框。
（3）void clearRect(left, top,width, height);
用于清除左上角顶点在(left,top)点、宽为width、高为height的矩形区域内的所有内容。
6．绘制任意形状
在简单的矩形不能满足需求的情况下，绘图环境提供了通过canvas路径（path）绘制复杂的形状或路径的方法。可以先绘制轮廓，然后绘制边框和填充。使用beginPath()方法开始绘制路径，然后使用moveTo()、lineTo()、arc()方法创建线段。绘制完毕使用stroke()或fill()即可添加填充或者设置边框。使用fill()会自动闭合所有未闭合路径。使用closePath()结束绘制并闭合形状（可选）。
7．绘制文字
在绘图环境中提供了两种方法在canvas中绘制文字。
（1）strokeText(text,x,y,[maxWidth])
在(x,y)处绘制只有strokeStyle边框的空心文本。
（2）fillText(text,x,y,[maxWidth])
在(x,y)处绘制带fillStyle填充的实心文本。
两者的参数相同：要绘制的文字和文字的位置(x,y)坐标。还有一个可选选项――最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。文字对齐属性影响文字与设置的(x,y) 坐标的相对位置。
8．设置阴影效果
Shadows API的属性为：
① shadowColor：用于设置阴影颜色，其值和CSS颜色值一致。
② shadowBlur：用于设置阴影模糊程度，此值越大，阴影越模糊。其效果和Photoshop的高斯模糊滤镜相同。
③ shadowOffsetX和shadowOffsetY：用于设置阴影的x和y偏移量，单位是像素。
9．设置颜色渐变
除了CSS颜色，fillStyle和strokeStyle属性可以设置为CanvasGradient对象，通过CanvasGradient可以为线条和填充使用颜色渐变。若创建CanvasGradient对象，可以使用createLinearGradient和createRadialGradient两个方法。前者创建线性颜色渐变，后者创建圆形颜色渐变。创建颜色渐变对象后，可以使用对象的addColorStop方法添加颜色中间值。
10．绘制图片
Context对象中拥有drawImage()方法可以将外部图片绘制到Canvas中。drawImage()方法的3种原型如下：
① drawImage(image, dx, dy);
② drawImage(image, dx, dy,dw, dh);
③ drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);
其中，image参数可以是HTMLImageElement、HTMLCanvasElement或者
HTMLVideoElement。第3个方法原型中的sx、sy在前两个中均为0，sw、sh均为image本身的宽和高；第2和第3个原型中的dw、dh在第1个中也均为image本身的宽和高。
（1）使用SVG图像的优势
与其他图像格式相比（例如JPEG和GIF），使用SVG的优势在于：
① SVG图像可通过文本编辑器来创建和修改。
② SVG图像可被搜索、索引、脚本化或压缩。
③ SVG图像是可伸缩的。
④ SVG图像可在任何的分辨率下被高质量地打印。
⑤ SVG可在图像质量不下降的情况下被放大。
在HTML5中，可以将SVG元素直接嵌入HTML页面中，示例代码如下：
&!DOCTYPE html&
&svg xmlns=&http://www.w3.org/2000/svg& version=&1.1& height=&190&&
&polygon points=&100,10 40,180 190,60 10,60 160,180&
style=&fill:stroke:stroke-width:5;fill-rule:& /&
（2）&canvas&标签和SVG以及VML之间的差异
Canvas和SVG都允许在浏览器中创建图形，但是它们在根本上是不同的。SVG是一种使用XML描述2D图形的语言，SVG基于XML，这意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。
【引导训练】
【任务7-3】网页中绘制各种图形和文字
【任务描述】
（1）在网页中绘制如图7-5至图7-7所示的各种图形。
图7-5 网页中绘制空心正方形的浏览效果
三亿文库包含各类专业文献、行业资料、专业论文、生活休闲娱乐、中学教育、各类资格考试、应用写作文书、文学作品欣赏、外语学习资料、幼儿教育、小学教育、07单元7网页图形绘制与游戏设计30等内容。　
　计算机图形学课程设计报告简单图形的绘制-_工学_高等...(30,0.7) 4.1.4 抛物线根据三个点画出抛物线: ...文档贡献者 lssluu 贡献于
专题推荐 ... 　计算机图形学课程设计 图形绘制变换_工学_高等教育_...游戏、艺术、广告、通信、天气预报等几乎所有领域都用...7 3.2.2 旋转变换 旋转变换函数如下: Void gl... 　新闻网页贴吧知道音乐图片视频地图百科文库 搜 试试 7 帮助 全部 DOC PPT TXT...MFC―图形绘制_计算机软件及应用_IT/计算机_专业资料。使用MFC制作一个绘制图形的... 　scratch游戏设计文档(2015 grade 7 program)_其它课程...学单元内容,选择合适的软件设计一款游戏或者动画作品...角色扮演游戏 WEG=WebGame :网页游戏 ACT=Action... 　1.3 设计思路 在进行图形绘制时,允许用户选择鼠标...x 每次都增加 1 个单元,设 x 像素 y 与 yi 及...0 ? n 。(7)使用指定曲线颜色调用 SetPixle ... 　四年级数学下第七单元图形的运动(二)教案_四年级数学...(2)画一画。 你能画出这个轴对称图形的另一半吗...师:同学们,今天老师带来了一个关于平移的小游戏,看... 　登录注册新闻网页贴吧知道音乐图片视频地图百科文库 搜...二单元《LOGO 编程真精彩》 第 7 课《画几何图形...(设计意图:结合生活中的停车问题,通过玩游戏这一... 　18.绘制等边多边形,如等边三角形、五角星和星形等...A.矢量图的基本组成单元是像素 B.像素图的基本组成...决定超出色域范围的色彩如何在图像中校正 7、下面哪... 　实验七 图形用户界面设计_工学_高等教育_教育专区。Java实验七 图形用户界面设计 《Java 语言程序设计》实验报告成绩 实验名称 姓名 专业 学号 班级(1)掌握 Java ...吃着苹果游世界的喜欢 | LOFTER（乐乎） - 记录生活，发现同好
LOFTER for ipad —— 记录生活，发现同好
吃着苹果游世界 的喜欢
&nbsp&nbsp被喜欢
&nbsp&nbsp被喜欢
{list posts as post}
{if post.type==1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type==2}
{if post.type == 3}
{if !!post.image}
{if post.type == 4}
{if !!post.image}
{if !!photo.labels && photo.labels.length>0}
{var wrapwidth = photo.ow < 500?photo.ow:500}
{list photo.labels as labs}
{var lbtxtwidth = Math.floor(wrapwidth*(labs.ort==1?labs.x:(100-labs.x))/100)-62}
{if lbtxtwidth>12}
{if !!labs.icon}
{list photos as photo}
{if photo_index==0}{break}{/if}
品牌${make||'-'}
型号${model||'-'}
焦距${focalLength||'-'}
光圈${apertureValue||'-'}
快门速度${exposureTime||'-'}
ISO${isoSpeedRatings||'-'}
曝光补偿${exposureBiasValue||'-'}
镜头${lens||'-'}
{if data.msgRank == 1}{/if}
{if data.askSetting == 1}{/if}
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post_index < 3}
{if post.type == 1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
{if drlist.length>0}
更多相似达人：
{list drlist as dr}{if drlist.length === 3 && dr_index === 0}、{/if}{if drlist.length === 3 && dr_index === 1}、{/if}{if drlist.length === 2 && dr_index === 0}、{/if}{/list}
暂无相似达人，
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
this.p={ dwrMethod:'queryLikePosts',fpost:'43d39b_e1e3461',userId:1371853,blogListLength:30};Android API Guide for Animation and Graphics（五）—— 动画与图形（画布和可绘制对象）
画布和可绘制对象（Canvas and Drawables）
框架接口提供了一组允许你自定义图形渲染到画布上或者修改已存在View对象外观的2D绘图接口。所以绘制2D图时，通常采用以下两种方式之一：
a.将图形或者动画绘制到你布局中的一个视图对象上。这种方式，绘制的图形由的视图层次结构进程处理，你只需简单的将图形声明到视图对象中。
b.直接在画布上绘制你的图形。这种方式，你需要自己适当的调用类的onDraw方法（传递你绘图的画布对象），或者调用画布的draw&()方法（如drawPicture（））。这样做你也可以控制任何动画。
当绘制不需要动态改变或没有交互性游戏部分的简单图形时，选择a是最好的方式。例如，当你想在其他静态应用程序中显示静态图形或预定义动画时，你应该将图形绘制到View上。Drawables更多信息。
当应用程序需要频繁重绘自身时，b是更好的选择。例如像视频游戏就需要绘制到画布上去。当然，有多种方法可以做到这一点：
在布局创建自定义视图控件的 UI线程中，调用invalidate()然后处理onDraw()回调。
或者，在单独管理SurfaceView的线程中尽可能快的实现画布上的绘制（这样就不需要调用invalidate()）。
在画布上绘制（Draw with a Canvas）
当应用需要实现实现特殊绘制和控制动画的图形时，就应该通过画布来实现。画布作为一个虚拟的界面作用于真正的图形绘制界面上，它持有你所有绘制方法的调用。通过画布，实际上是在一个放入window的位图中实现绘制的。
在绘制过程回调onDraw()方法事件中传给你一个Canvas对象，你只需要在它上面完成你的绘制工作就行了。当处理SurfaceView对象时，你也可以通过SurfaceHolder.lockCanvas()获取Canvas对象（所有这些使用场景都会在下文中讨论）。但是，如果你需要创建一个新的Canvas对象，你得定义在实际完成绘制工作的Bitmap对象上，这种方式，Bitmap对于画布是必要条件。你可以如下创建一个画布对象：
Bitmap b = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
现在，画布将绘制到定义的位图上。通过画布在上bitmap上绘图后，可以使用画布其中一个方法，Canvas.drawBitmap(Bitmap,&)将Bitmap对象传给另Canvas对象上。建议通过传给你的Canvas对象，并调用View.onDraw()或者SurfaceHolder.lockCanvas()来绘制你最终的图形。(详情阅读下文)
画布有自己的一套绘制方法可以给你使用，如drawBitmap(&),drawRect(),drawText()等等。其它你可能使用的类也有draw()方法。比如，你可能想把一个Drawable对象绘制到画布上，Drawable对象就有自己的draw()方法，它将Canvas作为参数。
在View上绘制（On a View）
如果应用程序不需要大量的处理或高的帧速率要求（比如是棋牌游戏、贪吃蛇游戏或者慢动画的应用程序），那你应该考虑创建自定义的视图并使用画布在View.onDraw()方法中进行绘制。这么做的好处就是Android框架预先提供给你一个在绘制时需要使用到的Canvas对象，这样你就不需要自己创建了。
首先，继承View类（或View的子类）然后声明onDraw回调方法。Android框架调用onDraw方法去请求你的View绘制自身。这就是通过onDraw()回调方法传给你Canvas对象后实现所有绘制调用的地方。
Android框架只会在需要时调用onDraw()。每次应用程序准备绘制时，你得调用invalidate()来让你的View无效。这暗示你的视图将被重新绘制，然后Android框架再调用onDraw方法（尽管不能保证这个回调会被立刻执行）。
在View组件的onDraw()方法中使用传给你的Canvas对象，或者在其它类携带Canvas对象的draw()方法中，完成所有的绘制工作。通过Canvas作为参数传递给你，然后通过它来调用不同的画布绘制方法。一旦onDraw()的工作完成，Android框架就使用Canvas绘制一个给系统处理的bitmap位图对象。
Note:为了在子线程中请求invalidate方法，而不是在UI线程中，你得调用postInvalidate().
在SurfaceView上绘制（On a SurfaceView）
SurfaceView是View的特殊子类，在视图层次结构中提供了专门的界面绘图功能。SurfaceView的目的就是将绘制的界面提供给应用程序的辅助线程，以至于应用程序不需要等到系统视图层次结构准备绘制的阶段。取而代之的是，辅助线程持有SurfaceView的引用，所以可以先绘制到它的画布上。
首先，需要创建一个继承SurfaceView的子类，这个子类需要实现SurfaceHolder.Callback.子类Callback是告诉你一些关于Surface底层信息的接口，比如Surface的创建，改变或销毁。这些事件对于你准备开始绘制工作，不管是否为新Surface的属性做调整，还是停止绘制工作以及杀掉一些潜在的任务是非常重要的。在SurfaceView类中定义辅助线程实现所有在画布上的绘制工作也是一个不错的选择。
你应该通过SurfaceHolder处理Surface对象，而不是直接处理它。所以，当你的SurfaceView初始化之后，通过调用getHolder（）获取SurfaceHolder对象。然后你应该通过调用addCallback()方法通知SurfaceHolder你想接收SurfaceHolder的回调（SurfaceHolder.Callback的回调）。然后在SurfaceView的子类中重写SurfaceHolder.Callback的回调函数。
为了在辅助线程的画布上进行绘制，你得传递SurfaceHandler线程并通过lockCanvas()检索Canvas对象。现在，你可以通过SurfaceHolder传递的Canvas对象将你所需图形绘制到画布上。一旦使用画布完成绘制，调用unlockCanvasAndPost()传递你的Canvas对象。Surface就会绘制出你在画布上所绘制的图形。每次重新绘制你都需要按这个顺序调用locking跟unlocking。
Note:每次传递从SurfaceHolder检索出的Canvas对象，前一个Canvas的状态都会被保留。为了确保图形的正确绘制，你得重新绘制整个界面。比如，你可以调用drawColor()填充颜色或者drawBitmap()设置图片背景来清理前一个Canvas保留下来的状态。否则，你将看到绘制出前一个画布的轨迹。
可绘制图（Drawables）
Android提供可自定义绘制形状，图片的2D图形绘制库。在android.graphics.drawable包中你可以找到常见的2D绘图类。
本文将讨论Drawable对象以及一些Drawable的子类的基本使用。获取更多通过Drawable实现帧动画的信息，参考.
Drawable是一个可绘制图形的抽象。你会发现Drawable类扩展出一些各种特定类型的可绘制图形，包括 BitmapDrawable, ShapeDrawable, PictureDrawable, LayerDrawable等等。当然，你可以通过你独特的方式扩展你自定义的可绘制对象。
通过资源文件创建（Creating from resource images）
一种通过项目资源引用图片文件添加图形的简单方式。这种方式支持的类型有png（首选），jpg（可接受），gif（不推荐）。这种方式明显也是应用程序图标，logo，或者比如游戏等其他图形的首选。
要使用图片资源，只需要将图片文件添加到项目的res/drawable/目录中，然后你就可以在代码或者xml布局中引用了。无论哪种方式，使用资源id是首选，因为它不需要文件的后缀名。（eg:my_image.png通过my_image来引用）。
Note:放置在res / drawable /中的图片资源可以在构建过程期间通过aapt工具自动无损图像压缩优化。例如，不需要多于256种颜色的真彩色PNG可以被转换为具有色板的8位PNG。这可以让同等质量的图片却需要更少的内存。所以注意二进制图片的放置位置，因为它可能在构建期间改变。如果你计划将图像读取为位流，以便将其转换为位图，请将图像放在res / raw /文件夹中，而不进行优化。
示例代码：
LinearLayout mLinearL
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Create a LinearLayout in which to add the ImageView
mLinearLayout = new LinearLayout(this);
// Instantiate an ImageView and define its properties
ImageView i = new ImageView(this);
i.setImageResource(R.drawable.my_image);
i.setAdjustViewBounds(true); // set the ImageView bounds to match the Drawable&#39;s dimensions
i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
// Add the ImageView to the layout and set the layout as the content view
mLinearLayout.addView(i);
setContentView(mLinearLayout);
在一些情况，你可以将图片作为Drawable对象进行处理。方式如下：
Resources res = mContext.getResources();
Drawable myImage = res.getDrawable(R.drawable.my_image);
通过xml资源创建（Creating from resource XML）
现在，你已经很熟悉Android的UI开发的规则了。因此你明白Android的强大以及在XML中定义对象的灵活性。这些思想从Views参透到Drawables.如果你想创建初始化不依赖于代码或用户交互的Drawable对象，在XML中定义Drawable是个不错的选择。即使你想应用程序在用户体验时改变Drawable属性，你也应该考虑将其定义在XML中，因为你仍然可以在初始化之后修改Drawable的属性。
XML定义好Drawable后，将文件存放于项目的res/drawable/目录下。然后调用Resources.getDrawable()并传入XML资源文件的ID来初始化、获取。
任何定义在XML并在应用程序中初始化的Drawable子类都支持inflate()方法。每个Drawable都支持在XML中利用指定的XMl属性进行填充。
示例：这是一个定义TransitionDrawable的XML
下面是这个XML的使用：
Resources res = mContext.getResources();
TransitionDrawable transition = (TransitionDrawable)
res.getDrawable(R.drawable.expand_collapse);
ImageView image = (ImageView) findViewById(R.id.toggle_image);
image.setImageDrawable(transition);
这个过度动画可以通过如下代码运行1秒：
transition.startTransition(1000);
可绘制形状（Shape Drawable）
当你想动态绘制一些2D图形，ShapeDrawable对象可能适合你的需求。
ShapeDrawable是Drawable的扩展类，任何使用Drawable的地方也可以用它。如可以为View对象通过setBackgroundDrawable()设置背景。当然，你也可以绘制某个形状作为自定义View，并添加到布局中。因为ShapeDrawable用它自己的draw()方法，你可以在创建View子类的时候在View.onDraw()方法中创建ShapeDrawable。下面是一个基本的View类扩展实现上述方法，绘制的ShapeDrawable作为一个View：
public class CustomDrawableView extends View {
private ShapeDrawable mD
public CustomDrawableView(Context context) {
super(context);
int x = 10;
int y = 10;
int width = 300;
int height = 50;
mDrawable = new ShapeDrawable(new OvalShape());
mDrawable.getPaint().setColor(0xff74AC23);
mDrawable.setBounds(x, y, x + width, y + height);
protected void onDraw(Canvas canvas) {
mDrawable.draw(canvas);
在构造函数中，ShapeDrawable声明为OvalShape，然后设置它的颜色和边界。如果不设置边界，形状将不会被绘制，但是如果不设置颜色，它将默认设置为黑色。
自定义View定义好后，你可以用任何你喜欢的方式进行绘制。如上的代码，可以在Activity中进行绘制：
CustomDrawableView mCustomDrawableV
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mCustomDrawableView = new CustomDrawableView(this);
setContentView(mCustomDrawableView);
如果你想在XML而不是在Activity中绘制自定义的Drawable。你需要重写CustomDrawableView类的构造函数View（Context, AttributeSet），因为当填充XML布局的时候会调用这个构造函数来初始化。XML添加CustomDrawable如下所示：
Nine-patch
这里省略了.9图的相关介绍，获取更多信息参考（刚好前两天Google开发者大会开放了国内Android官方网站，不需要翻墙）。
可绘制向量图（Vector Drawables）
VectorDrawable是一组点，线，曲线以及关联的颜色信息所定义在XML文件的向量图。从Android 5.0（API 21）开始，有两个类支持向量图作为Drawable资源：VectorDrawable和AnimatedVectorDrawable。先于Android5.0，23.2或更高版本的支持库更全的支持了向量图和动画向量图。