canvas怎么画一个渐变的圆角边框，填充的也行_百度知道
canvas怎么画一个渐变的圆角边框，填充的也行
我有更好的答案
用路径工具里的圆角矩形工具拉出矩形、不要取消选区用渐变工具在选区内拉出你要的渐变色彩!方法二：1、用路径工具里的圆角矩形工具拉出矩形；2、右键“建立选区”：方法一,把路径图形转换成蚂蚁线选区，在弹出的对话框中选择“新选区”；3：1，然后“确定”；3、删除刚刚新创建的图层；2PS制作渐变圆角矩形、创建一个新的图层；5、在新图层里尽情填充吧；4，而选区则保留了下来、按住ctrl(控制键)的同时按回车
专注培养IT技术人才
主营：PHP培训，JAVA培训，HTML5培训，UI培训，Linux培训，Python培训
为您推荐：
其他类似问题
圆角的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。Android显示圆角图片，可指定图片某几个角为圆角
中实现圆角图片的方式有很多种：
三、XferMode
四、BitmapShader
五、ClipPath
其中一、二两种方法比较简单粗暴，三、四两种方法是比较常见的。
纵观目前主流的图片加载库：Picasso，Glide，Fresco，Android-Universal-Image-Loader等，它们都可以显示圆角的图片，但是除了Fresco可以指定哪几个角为圆角、哪几个角不为圆角外，其他三者都没有实现这个功能，而Fresco的侵入性比较强，布局中需使用com.facebook.drawee.view.simpledraweeview而不是简单的ImageView，同时Fresco需要在布局中每个角的圆角属性上设置false或true，这就未免有些麻烦了。
本文基于大众化图片加载库Universal-Image-Loader中的RoundedBitmapDisplayer进行拓展，自定义了一个FlexibleRoundedBitmapDisplayer，可以用简单快捷的代码指定图片的某几个角为圆角，某几个角不为圆角。
首先我们看一下Universal-Image-Loader中的RoundedBitmapDisplayer源代码：
public class RoundedBitmapDisplayer implements BitmapDisplayer {
protected final int cornerR
public RoundedBitmapDisplayer(int cornerRadiusPixels) {
this(cornerRadiusPixels, 0);
public RoundedBitmapDisplayer(int cornerRadiusPixels, int marginPixels) {
this.cornerRadius = cornerRadiusP
this.margin = marginP
public void display(Bitmap bitmap, ImageAware imageAware, LoadedFrom loadedFrom) {
if(!(imageAware instanceof ImageViewAware)) {
throw new IllegalArgumentException(&ImageAware should wrap ImageView. ImageViewAware is expected.&);
imageAware.setImageDrawable(new RoundedBitmapDisplayer.RoundedDrawable(bitmap, this.cornerRadius, this.margin));
public static class RoundedDrawable extends Drawable {
protected final float cornerR
protected final RectF mRect = new RectF();
protected final RectF mBitmapR
protected final BitmapShader bitmapS
protected final P
public RoundedDrawable(Bitmap bitmap, int cornerRadius, int margin) {
this.cornerRadius = (float)cornerR
this.margin =
this.bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
this.mBitmapRect = new RectF((float)margin, (float)margin, (float)(bitmap.getWidth() - margin), (float)(bitmap.getHeight() - margin));
this.paint = new Paint();
this.paint.setAntiAlias(true);
this.paint.setShader(this.bitmapShader);
this.paint.setFilterBitmap(true);
this.paint.setDither(true);
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
this.mRect.set((float)this.margin, (float)this.margin, (float)(bounds.width() - this.margin), (float)(bounds.height() - this.margin));
Matrix shaderMatrix = new Matrix();
shaderMatrix.setRectToRect(this.mBitmapRect, this.mRect, ScaleToFit.FILL);
this.bitmapShader.setLocalMatrix(shaderMatrix);
public void draw(Canvas canvas) {
canvas.drawRoundRect(this.mRect, this.cornerRadius, this.cornerRadius, this.paint);
public int getOpacity() {
return -3;
public void setAlpha(int alpha) {
this.paint.setAlpha(alpha);
public void setColorFilter(ColorFilter cf) {
this.paint.setColorFilter(cf);
可以看出Universal-Image-Loader显示圆角图片的方法属于上述第四种方法&&BitmapShader，Shader被称之为着色器、渲染器，而BitmapShader产生的是一个图像，有点类似Photoshop中的图像渐变填充，它的作用就是通过Paint对画布进行指定Bitmap的填充，这里的填充模式是TileMode.CLAMP（拉伸模式，拉伸图片最后一像素点，一般指定图片合适大小时不会拉伸），也就是使用BitmapShader来进行图形填充。通俗些说就是用一张图片创建了一支具有图像填充功能的画笔，然后使用这个画笔画出一个形状，图片就在画出的地方显示。Universal-Image-Loader这里用drawRoundRect()方法画出了一个圆角矩形，故图像显示成了圆角矩形。
用过Photoshop的童鞋应该比较好理解，这就类似你给一个图层加了一个白蒙板，然后用不透明度100%的黑色画笔去在蒙板上绘制，画笔所过之处你原来的图层就会显现出来，就是这个意思。
那RoundedBitmapDisplayer画圆角图片的原理分析完了，说一下实现指定某几个角为圆角的思路：
思路就是先画一个圆角矩形把这个图片变成圆角，然后你想让那个角不是圆角，就把对应角位置那部分的原图画出来即可，画一个矩形就可以把原来的角显示出来，用的方法是drawRect()。
下面就是FlexibleRoundedBitmapDisplayer的完整代码：
* Universal-Image-Loader中RoundedBitmapDisplayer的增强版，可以自定义图片4个角中的指定角为圆角
public class FlexibleRoundedBitmapDisplayer implements BitmapDisplayer {
protected int cornerR
public static final int CORNER_TOP_LEFT = 1;
public static final int CORNER_TOP_RIGHT = 1 && 1;
public static final int CORNER_BOTTOM_LEFT = 1 && 2;
public static final int CORNER_BOTTOM_RIGHT = 1 && 3;
public static final int CORNER_ALL = CORNER_TOP_LEFT | CORNER_TOP_RIGHT | CORNER_BOTTOM_LEFT | CORNER_BOTTOM_RIGHT;
* 构造方法说明：设定圆角像素大小，所有角都为圆角
* @param cornerRadiusPixels 圆角像素大小
public FlexibleRoundedBitmapDisplayer(int cornerRadiusPixels){
this.cornerRadius = cornerRadiusP
this.corners = CORNER_ALL;
* 构造方法说明：设定圆角像素大小，指定角为圆角
* @param cornerRadiusPixels 圆角像素大小
* @param corners 自定义圆角
* CORNER_NONE　无圆角
* CORNER_ALL 全为圆角
* CORNER_TOP_LEFT | CORNER_TOP_RIGHT | CORNER_BOTTOM_LEFT | CORNER_BOTTOM_RIGHT　指定圆角（选其中若干组合
public FlexibleRoundedBitmapDisplayer(int cornerRadiusPixels, int corners){
this.cornerRadius = cornerRadiusP
this.corners =
public void display(Bitmap bitmap, ImageAware imageAware, LoadedFrom loadedFrom) {
if (!(imageAware instanceof ImageViewAware)) {
throw new IllegalArgumentException(&ImageAware should wrap ImageView. ImageViewAware is expected.&);
imageAware.setImageDrawable(new FlexibleRoundedDrawable(bitmap,cornerRadius,corners));
public static class FlexibleRoundedDrawable extends Drawable {
protected final float cornerR
protected final RectF mRect = new RectF(), mBitmapR
protected final BitmapShader bitmapS
protected final P
public FlexibleRoundedDrawable(Bitmap bitmap, int cornerRadius, int corners) {
this.cornerRadius = cornerR
this.corners =
bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mBitmapRect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(bitmapShader);
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
mRect.set(0, 0, bounds.width(), bounds.height());
Matrix shaderMatrix = new Matrix();
shaderMatrix.setRectToRect(mBitmapRect, mRect, Matrix.ScaleToFit.FILL);
bitmapShader.setLocalMatrix(shaderMatrix);
public void draw(Canvas canvas) {
//先画一个圆角矩形将图片显示为圆角
canvas.drawRoundRect(mRect, cornerRadius, cornerRadius, paint);
int notRoundedCorners = corners ^ CORNER_ALL;
//哪个角不是圆角我再把你用矩形画出来
if ((notRoundedCorners & CORNER_TOP_LEFT) != 0) {
canvas.drawRect(0, 0, cornerRadius, cornerRadius, paint);
if ((notRoundedCorners & CORNER_TOP_RIGHT) != 0) {
canvas.drawRect(mRect.right - cornerRadius, 0, mRect.right, cornerRadius, paint);
if ((notRoundedCorners & CORNER_BOTTOM_LEFT) != 0) {
canvas.drawRect(0, mRect.bottom - cornerRadius, cornerRadius, mRect.bottom, paint);
if ((notRoundedCorners & CORNER_BOTTOM_RIGHT) != 0) {
canvas.drawRect(mRect.right - cornerRadius, mRect.bottom - cornerRadius, mRect.right, mRect.bottom, paint);
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
public void setAlpha(int alpha) {
paint.setAlpha(alpha);
public void setColorFilter(ColorFilter cf) {
paint.setColorFilter(cf);
然后就可以这样使用Universal-Image-Loader了：
* 设置图片---自定义图片4个角中的指定角为圆角
* @param url 图片的url
* @param cornerRadius 圆角像素大小
* @param corners 自定义圆角:
* 以下参数为FlexibleRoundedBitmapDisplayer中静态变量:
* CORNER_NONE　无圆角
* CORNER_ALL 全为圆角
* CORNER_TOP_LEFT | CORNER_TOP_RIGHT | CORNER_BOTTOM_LEFT | CORNER_BOTTOM_RIGHT　指定圆角（选其中若干组合
* @param image url为空时加载该图片
* @param imageView 要设置图片的ImageView
public void setRoundedImage(String url, int cornerRadius, int corners, int image, ImageView imageView) {
ImageLoader imageLoader = ImageLoader.getInstance();
DisplayImageOptions options = new DisplayImageOptions.Builder()
.showImageOnLoading(image).showStubImage(image)
.showImageForEmptyUri(image)//url为空时显示的图片
.showImageOnFail(image)//加载失败显示的图片
.cacheInMemory()//内存缓存
.cacheOnDisc()//磁盘缓存
.displayer(new FlexibleRoundedBitmapDisplayer(cornerRadius,corners)) // 自定义增强型BitmapDisplayer
imageLoader.displayImage(url, imageView, options);
看看效果：本文剖析了 Canvas API 中 arc 及 arcTo 函数的特征，并分别使用它们实现了 Canvas API 中所未提供的绘制圆角矩形的功能。...
Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。
我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所...
public void drawRoundRect (RectF rect, float rx, float ry, Paint paint)
Draw the specified round-re...
将bitmap处理为圆形或圆角矩形可以使用canvas重新绘图，通过设置背景与图片的相交部分显示来得到圆形或圆角矩形图片处理为圆形图片的方法public static Bitmap getCircle...
canvas的一点小应用
本文属于《html5 Canvas画图系列教程》
上一篇文章我讲了画矩形和圆形的方法，他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。
一个正常的圆角矩形，...
实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示，如何绘制虚线
以及控制虚线间隔大小，学会绘制圆角矩形的技巧...
canvas to draw
window.onload=function () {
var drawi...
1、首先说一下canvas类：
Class Overview
The Canvas class holds the "draw" calls. To draw something, you need...
1、首先说一下canvas类：
Class Overview
The Canvas class holds the "draw" calls. To draw something, you n...
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例_html5教程技巧-H5教程-PHP中文网QQ群微信公众号还没有收藏使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例_html5教程技巧圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。
因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。
&!DOCTYPE html&
&html lang=&zh&&
&meta charset=&UTF-8&&
&title&圆角矩形&/title&
body { background: url(&./images/bg3.jpg&) }
#canvas { border: 1px solid # display: margin: 50 }
&p id=&canvas-warp&&
&canvas id=&canvas&&
你的浏览器居然不支持Canvas？！赶快换一个吧！！
window.onload = function(){
var canvas = document.getElementById(&canvas&);
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext(&2d&);
context.fillStyle = &#FFF&;
context.fillRect(0,0,800,600);
drawRoundRect(context, 200, 100, 400, 400, 50);
context.strokeStyle = &#0078AA&;
context.stroke();
function drawRoundRect(cxt, x, y, width, height, radius){
cxt.beginPath();
cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
cxt.lineTo(width - radius + x, y);
cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
cxt.lineTo(width + x, height + y - radius);
cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
cxt.lineTo(radius + x, height +y);
cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
cxt.closePath();
运行结果：
建议大家自己动手绘制一个圆角矩形，这样有助于对路径的掌握。
下面我们用这个函数来做点其他的事情。
绘制2048游戏界面对代码不做过多讲解，大家自己研究研究，建议自己动手先尝试写一下。因为我这里采用的是硬编码，所以不是很好，大家也可尝试优化一下。
&!DOCTYPE html&
&html lang=&zh&&
&meta charset=&UTF-8&&
&title&2048游戏界面&/title&
body { background: url(&./images/bg3.jpg&) }
#canvas { border: 1px solid # display: margin: 50 }
&p id=&canvas-warp&&
&canvas id=&canvas&&
你的浏览器居然不支持Canvas？！赶快换一个吧！！
window.onload = function(){
var canvas = document.getElementById(&canvas&);
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext(&2d&);
context.fillStyle = &#FFF&;
context.fillRect(0,0,800,600);
drawRoundRect(context, 200, 100, 400, 400, 5);
context.fillStyle = &#AA7B41&;
context.strokeStyle = &#0078AA&;
context.stroke();
context.fill();
for(var i = 1; i &= 4; i++){
for(var j = 1; j &= 4; j++){
drawRoundRect(context, 200 + 16 * i + 80 * (i - 1), 100 + 16 * j + 80 * (j - 1), 80, 80, 5);
context.fillStyle = &#CCBFB4&;
context.strokeStyle = &#0078AA&;
context.stroke();
context.fill();
function drawRoundRect(cxt, x, y, width, height, radius){
cxt.beginPath();
cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
cxt.lineTo(width - radius + x, y);
cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
cxt.lineTo(width + x, height + y - radius);
cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
cxt.lineTo(radius + x, height +y);
cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
cxt.closePath();
运行结果：
这个圆角矩形的函数写好之后，可以自己封装进JS文件里，以后遇到什么好的函数都可以放进去，这样积累下来，这个文件就是一套属于自己的图形库和游戏引擎了，是不是非常的酷？
其实游戏制作是Canvas的主要用途，但是要知道每一个游戏设计师都是一个艺术家。
绘制微信对话框大家可以尝试着使用Canvas绘制一下微信聊天界面，作为练习与巩固。
这里使用到了绘制矩形，绘制圆角矩形，绘制多线条图形，填充颜色的一些知识。还有一些 Canvas文本API 我们并没有说到，所以大家只要能绘制出一个大概的界面就算合格了。能够绘制出来，也就基本掌握了Canvas API。
其实上述对话是生成出来的&&&&，可谓是微商神器。是不是非常的酷？
这只是暑假花两天时间写的最初版本，还尚未达到发布的地步，在我写本节的时候，这个网页的界面还正在优化中。大家可以尝试自己动手做做，也可以关注和参考我的这个小项目github：。本节就不再重复给出界面代码了。
好了，学到这里基本上已经学完了所有基本的Canvas绘图的api，大家拿起自己的画笔，自由的发挥吧！共3篇777点赞收藏分享：.php.cn&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号本文属于《》
上一篇文章我讲了画矩形和圆形的方法，他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。
一个正常的圆角矩形，我们先假设他四个角的圆角弧度一致——因为这样比较好画。我们动用把面拆成线条的能力，很容易就能发现圆角矩形其实是由4条钩子般的曲线组成。
提到钩子，如果你看过我，那么可能你一下就明白了这种图形就可以用arcTo画出来。
我讲arcTo的时候提过，arcTo有个特性就是，他的第2条切线延长也并不会对他画出的线条造成影响（在上文的最后部分），这也为我们画圆角矩形提供了方便，不用担心变形。
下面放出我在国外网站上发现的canvas画圆角矩形的方法，应该是效率最高的了。
1234567891011121314//圆角矩形
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
this.beginPath();
this.moveTo(x+r, y);
this.arcTo(x+w, y, x+w, y+h, r);
this.arcTo(x+w, y+h, x, y+h, r);
this.arcTo(x, y+h, x, y, r);
this.arcTo(x, y, x+w, y, r);
// this.arcTo(x+r, y);
this.closePath();
return this;
此函数的参数，依次是x坐标，y坐标，宽度，高度，圆角半径。特别要注意最后这个参数——圆角半径。
此方法用了4次arcTo画出了一个圆角矩形，他的每个角的弧度都是一样的。此圆角矩形的坐标点也是和矩形一样的左上角，但他的起笔点可不是这里，而是：
你可以去掉其中的某条线，看看此方法的原理。
当然，提醒一下，不论画什么图形，都要记得闭合路径——closePath，避免留下隐患。
这个方法最后有个return this，是为了让你能使用链式语法，如：
1ctx.roundRect(200,300,200,120,20).stroke();
你不需要的话也可以去掉他。
如果你并不想扩充ContextRenderingContext2D原型，你也可以把这个方法另外做一个函数。
当时发现这个函数的时候，我连arcTo是什么都不知道，所以也没有记住是在哪个网站上发现的，反正不是我原创的，在此感谢作者。
在前文中我一直强调这个方法画出的圆角矩形每个角都是一致的，是因为css3中的border-radius可以很轻松的画出每个角甚至每个角的邻边圆弧不一致的圆角矩形，待我找找canvas中画不规则圆角矩形的办法吧，不过个人觉得挺难的。
关于十年灯
Javascript工程师。好想转Nodejs，好想用es6