在画布上绘制（渐进的）油漆飞溅 [英] Draw a (progressive) paint splash on a canvas
问题描述
我正在寻找一个简单的方法，我可以在画布上绘制一个油漆飞溅，像这样：
一种方法是点击大量小粒子将绘制一个圆圈，但我不想管理大量的粒子对象。
EDIT ：示例： jsfiddle.net/MK73j/4/
第二种方法是使用少量图片和操作缩放和旋转，但我想对效果有一个好的随机效果。
第三种方法是创建一些随机点，用贝塞尔曲线连接并填充内容，但我只有一个标记。 / p>
好吧，我不知道有没有更好的方法，有一个效果，看起来像这个图像，或者如果我必须选择3我想到的。 / p>
您可以使用幻觉创建一个不错的splat效果。
因为对象在接近时会成长，所以你可以动画增加大小加一点动作来创建你的splat效果。
你可以使用context.drawImage来处理调整大小：
context.drawImage（splashImg，0，0，splashImg.width，splashImg.height，
newX，newY ，newWidth，newHeight）;
这里是代码和小提琴： http://jsfiddle.net/m1erickson/r8Grf/
<！doctype html>
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ - reset css - >
< script type =text / javascriptsrc =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）;
}
.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 。高度）;
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（）;
}
//请求新框架
requestAnimFrame（function（）{
animate（）;
}）;
}
}）; // end $（function（）{}）;
< / script>
< / head>
< body>
< br />< button id =go> Splash！< / button>< br />< br /
< canvas id =canvaswidth = 326 height = 237>< / canvas>
< / body>
< / html>
I'm looking for a simple method which can able me to draw in a canvas a paint splash like this on :
One method will be to fire a lot of small particles which will paint a little circle, but I don't want to manage a lot of particle objects.
EDIT : example here: jsfiddle.net/MK73j/4/
A second method will be to have few images and manipulate scale and rotation, but I want to have a good random on the effect.
A third method will be to make some random litte points, join them with bezier curves and fill the content, but I will have only a single mark.
Well I don't know if there is a better method to have an effect which looks like this image or if I have to choose on of the 3 I thought about.
You can use illusion to create a nice splat effect.
Since objects "grow" as they approach, you can animate an increasing size plus a little motion to create your splat effect.
You can use context.drawImage to handle the resizing:
context.drawImage(splashImg, 0 ,0, splashImg.width, splashImg.height,
newX, newY, newWidth, newHeight);
Here is code and a 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>
这篇关于在画布上绘制（渐进的）油漆飞溅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
