Question

我试图为填充可变宽度形状的笔设置动画，目前正在使用html5画布。理想情况下，我希望能够让下面的样本都开始亮起并在黑暗中变色，并且根本不出现并变成彩色，好像从什么都没有。

source-in似乎不起作用，至少在firefox中。

有问题的图像是一个简单的SVG路径，所以如果有合理的方法从SVG bezier路径生成画布剪辑路径，那也可以。

var img = new Image();
img.src = "data:image/svg+xml;base64,...";

var xRecords = [...];
var yRecords = [...];

var canvas = document.getElementById("topCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
ctx.strokeStyle = "#0000ff";
ctx.lineWidth = 90;

ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(xRecords[0], yRecords[0]);

for(var i = 0; i < xRecords.length; i++) {
   ctx.lineTo(xRecords[i], yRecords[i]);
   ctx.stroke();
}

http://codepen.io/matelich/pen/gpLmOW

如果有帮助的话，生成图像的替代版本并不是什么大问题。哦，动画只是一个样本。

更新这大部分适用于Chrome和IE，但不适用于Firefox：http://codepen.io/matelich/pen/pJNeRq

Answer 1

FF不喜欢你的SVG dataURL。

选项＃1：

您可以使用.png图片。

选项＃2：

您可以使用context.moveTo和context.bezierCurveTo在画布中创建一个三次贝塞尔曲线（如SVG的“C”）。

然后你的合成即使在FF中也能正常工作：

var canvas = document.getElementById("topCanvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.onload=start;
img.src = 'https://dl.dropboxusercontent.com/u/139992952/multple/svg2png.png';
var xRecords = [117.6970666666671, 137.5037866666671, 139.6247579166671, 138.2627966666671, 134.75555041666712, 130.4406666666671, 126.65579291666711, 124.7385766666671, 126.0266654166671, 131.8577066666671, 155.5330366666671, 191.76562666666712, 224.94953666666714, 239.47882666666712];
var yRecords =  [143.95648000000128, 200.21077333333463, 232.21213000000128, 264.735546666668, 296.24260333333467, 325.19488000000126, 350.05395666666794, 369.2814133333347, 381.33883000000134, 384.687786666668, 371.9640133333346, 346.7872000000013, 322.15182666666794, 311.05237333333463];

function start(){
  canvas.width=img.width;
  canvas.height=img.height;

  ctx.beginPath();
  ctx.rect(0, 0, 640, 640);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.globalCompositeOperation = "darker";
  ctx.drawImage(img, 0, 0);
  ctx.globalCompositeOperation = "lighter";
  ctx.drawImage(img, 0, 0);
  ctx.globalCompositeOperation = "xor";
  ctx.drawImage(img, 0, 0);
  ctx.globalCompositeOperation = "destination-over";
  ctx.strokeStyle = "#0000ff";
  ctx.lineWidth = 90;

  ctx.beginPath();
  ctx.lineCap = "round";
  ctx.moveTo(xRecords[0], yRecords[0]);

  var i = 0;
  function drawNext() 
  { 
    i++;
    console.log(i+"!");
    if(i >= xRecords.length) { return; }
    ctx.lineTo(xRecords[i], yRecords[i]);
    ctx.stroke();
    setTimeout(drawNext, 500);
  }
  drawNext();

}

body{ background-color: white; }
#canvas{border:1px solid red;}

<canvas id="topCanvas" width=300 height=300></canvas>

剪辑画布笔画到图像

1 个答案: