从图像绘制轮廓

Question

我想通过在背景中绘制并扩展第二张图片来在图片周围绘制轮廓，但是我不是很成功，如何绘制常规笔画？

我绘制的轮廓：

我要绘制的轮廓：

我的代码；

    {
      name = ""
      type = "MX"
      records = [
        "1 aspmx.l.google.com",
        "10 aspmx2.googlemail.com",
        "10 aspmx3.googlemail.com",
        "5 alt1.aspmx.l.google.com",
        "5 alt2.aspmx.l.google.com"
      ]
    },

Answer 1

我认为您在正确的轨道上...

这是一种策略，而不是缩放，而是每次稍微偏移一次都绘制同一张原始图片几次，请参见以下示例：

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var img = new Image;
img.onload = draw;
img.src = "http://i.stack.imgur.com/UFBxY.png";

var s = 10, // thickness scale
  x = 15, // final position
  y = 15;

function draw() {
  ctx.globalAlpha = 0.2
  ctx.filter = 'brightness(0%)'
  for (i = 0; i < 360; i++)
    ctx.drawImage(img, x + Math.sin(i) * s, y + Math.cos(i) * s);
  ctx.globalAlpha = 1
  ctx.filter = 'none'
  ctx.drawImage(img, x, y);
}

<canvas id=canvas width=350 height=600></canvas>

我申请了filter = 'brightness(0%)'，但您可以申请的申请还有更多：
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

我正在使用HTML画布，但是相同的想法应该可以很好地“翻译”为android画布。