怎么在canvas上添加边框？

很多情况下，Canvas 仅仅用作其他对象的容器，而没有任何可见属性。如果满足以下任一条件，Canvas 即不可见：

Height 属性等于 0。

Width 属性等于 0。

Background 属性等于 nullNothingnullptrunitnull 引用（在 Visual Basic 中为 Nothing）。

Opacity 属性等于 0。

Visibility 属性等于 Visibility..::..Collapsed。

Canvas 的某个上级对象不可见。

前端需要在后端返回的图片集合里，根据提供的对角线坐标绘制矩形。矩形可能是多个。效果达到如下：

1、根据后端返回的图片list，生成canvas画布，

2、把图片画到canvas里面，再根据后端返回的坐标，在canvas里画矩形框。

此项目中，后端返回的坐标是基于缩略图的，但是前端渲染在页面上的图片，会按宽为788px来显示，所以坐标应该要按照比例来算。

真实的左上x点的计算方式为：真实宽 / 压缩宽 * 压缩x点

https://blog.csdn.net/qq_29594393/article/details/52849339

https://www.runoob.com/w3cnote/html5-canvas-intro.html

https://www.imooc.com/wenda/detail/551496

https://blog.csdn.net/qq_44907926/article/details/114907056?spm=1001.2014.3001.5501

①画矩形时，如果里面的参数有不是整数的话，容易导致边框粗细不一等问题。

②当矩形的边框lineWidth设置为1px时候，会出现线条模糊的问题。

关于第②个问题的延申：

这是测试提给我的bug：

我的思路存在的问题：

首先，同样是矩形的边框我同样设置的都是1px，不应该有的线条颜色深，有的颜色淡啊，排除了参数没有取整的问题后，我怀疑了颜色red在画布上的渲染问题，换成十六进制的同样有问题。就在我一筹莫展的时候，我叫来了小伙伴，我说你看这线条颜色是不是不一样，我开始怀疑我的眼神有问题。小伙伴说，你给线条整粗点看看这问题明显吗。我把边框线条设置了2px，发现和1px的粗细是一样的，并且颜色一样了线条不模糊了。换成别的宽度，只要不是1px都没有问题了。

思维的问题在于，我百度问题的描述有问题，我之前一直搜canvas绘制矩形线条深浅不一，我应该搜canvas矩形线条模糊。我排查问题的时候，固定思维模式觉得1px写的没错，却没有尝试排查。

关于这个问题的详细解答与解决办法：

canvas1px线条模糊

我的理解

canvas的线条画法不一样，canvas的每条线都有一条无限细的“中线”，线条的宽度是从中线向两侧延伸的，也就是说canvas绘制1px的时候，是中线向左右两边延申各取0.5，并不是向某一边延申（如果只是往右延申就不再是问题了），此时问题出现了，计算机不允许出现小于1px的图形，所以他做了一个折中的事：把这两个像素都绘制了。所以，如此一来，本来1px的线条，就成了看起来2px宽的线条。

延申：

HTML 5 Canvas详细讲解 ———— 第二篇（清除canvas画布上指定区域+橡皮擦功能实现；在画布上平铺指定图片；在画布上绘制文本；总结案例之刮刮乐功能实现）

package shadow.widget

import android.content.Context

import android.graphics.Canvas

import android.graphics.Color

import android.graphics.Paint

import android.graphics.Rect

import android.util.AttributeSet

import android.widget.ImageView

public class myImageView extends ImageView {

private String namespace="http://shadow.com"

private int color

public myImageView(Context context, AttributeSet attrs) {

super(context, attrs)

// TODO Auto-generated constructor stub

color=Color.parseColor(attrs.getAttributeValue(namespace, "BorderColor"))

}

/* (non-Javadoc)

* @see android.widget.ImageView#onDraw(android.graphics.Canvas)

*/

@Override

protected void onDraw(Canvas canvas) {

// TODO Auto-generated method stub

super.onDraw(canvas)

//画边框

Rect rec=canvas.getClipBounds()

rec.bottom--

rec.right--

Paint paint=new Paint()

paint.setColor(color)

paint.setStyle(Paint.Style.STROKE)

canvas.drawRect(rec, paint)

}

这里要注意的是super.onDraw(canvas)在前，否则边框可能会被图片所覆盖。

xml写法

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:shadow="http://shadow.com"

android:background="@drawable/bg_newslist"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<RelativeLayout android:id="@id/LinerLayout01"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<shadow.widget.myImageView

android:id="@id/newsitemPicWithBorder"

shadow:BorderColor="GRAY"

android:layout_width="80px"

android:layout_height="60px"

android:layout_alignParentRight="true"

android:src="@drawable/image_loading"

android:layout_centerInParent="true"

android:layout_marginRight="3px"

></shadow.widget.myImageView>

</LinearLayout>

设置边框颜色 shadow:BorderColor="GRAY"

myImageView imageView=(myImageView)findViewById(....)

imageView.set....//给imageView赋值

---