我正在寻找一种简单的方法，该方法可以使我在 Canvas 上绘制油漆飞溅，如下所示:
一种方法是发射很多小的粒子，这会画一个小圆圈，但是我不想管理很多粒子对象。
编辑:example here: jsfiddle.net/MK73j/4/
第二种方法是使图像少一些，来控制比例和旋转，但是我希望对效果有很好的随机性。
第三种方法是制作一些随机的亮点，将它们与贝塞尔曲线连接起来并填充内容，但是我只有一个标记。
好吧，我不知道是否有更好的方法来产生类似于该图像的效果，或者我是否必须从我所考虑的3种中选择一种。
最佳答案
您可以使用幻觉来创建漂亮的splat效果。
由于对象在接近时会“增长”，因此您可以为不断增大的大小加一点动画进行动画处理，以创建splat效果。
您可以使用context.drawImage来处理大小调整:
context.drawImage(splashImg, 0 ,0, splashImg.width, splashImg.height,
newX, newY, newWidth, newHeight);
这是代码和 fiddle :http://jsfiddle.net/m1erickson/r8Grf/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
$("go").html("Loading...");
var count=80;
var win=new Image();
var splash;
win.onload=function(){
splash=new Image();
splash.onload=function(){
ctx.drawImage(win,0,0);
}
splash.src="http://dl.dropbox.com/u/139992952/splash2.svg";
}
win.src="http://dl.dropbox.com/u/139992952/window.png";
$("#go").click(function(){ count=80; animate(); });
function animate() {
// drawings
if(--count>1){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.drawImage(win,0,0);
ctx.globalCompositeOperation = 'destination-over';
ctx.drawImage(splash,0,0,splash.width,splash.height,25,25,splash.width/count,splash.height/count);
ctx.restore();
}
// request new frame
requestAnimFrame(function() {
animate();
});
}
}); // end $(function(){});
</script>
</head>
<body>
<br/><button id="go">Splash!</button><br/><br/>
<canvas id="canvas" width=326 height=237></canvas>
</body>
</html>
关于javascript - 在 Canvas 上绘制(渐进式)油漆飞溅，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15968717/