我正在尝试对填充可变宽度形状的钢笔进行动画处理,目前正在使用 html5 Canvas 。理想情况下,我希望能够让下面的样本既开始光照并在黑暗中着色,又或者根本不出现并着色,就像从无到有一样。
source-in 似乎不起作用,至少在 Firefox 中是这样。
所讨论的图像是一个简单的 SVG 路径,因此如果有一种合理的方法从 SVG 贝塞尔曲线路径生成 Canvas 剪辑路径,那也可以。
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
最佳答案
FF 不喜欢您的 SVG dataURL。
选项#1:
您可以改用 .png 图像。
选项#2:
您可以使用 context.moveTo
和 context.bezierCurveTo
在 Canvas 中创建三次贝塞尔曲线(如 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>
关于javascript - 将 Canvas 笔划剪辑到图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30449442/