Ik ben op zoek naar een eenvoudige methode waarmee ik in een canvas een verfplonszoals deze kan tekenen op:
Eén methode is om veel kleine deeltjes af te vurendie een kleine cirkel zullen schilderen, maar ik wil niet veel deeltjesobjecten beheren.
BEWERKEN: example here:jsfiddle.net /MK73j/4/
Een tweede methode is om weinig afbeeldingen te hebben en schaal en rotatie te manipuleren, maar ik wil een goede willekeurig effect hebben.
Een derde methode is om wat willekeurige kleine punten te maken, ze samen te voegen met bezier-curvenen de inhoud te vullen, maar ik zal maar één markering hebben.
Nou, ik weet niet of er een betere methode is om een effect te krijgen dat op deze afbeelding lijkt of dat ik een van de 3 moet kiezen waar ik aan dacht.
Antwoord 1, autoriteit 100%
Je kunt illusie gebruiken om een mooi splat-effect te creëren.
Omdat objecten ‘groeien’ naarmate ze dichterbij komen, kun je een groter formaat en een beetje beweging animeren om je splat-effect te creëren.
U kunt context.drawImage gebruiken om het formaat te wijzigen:
context.drawImage(splashImg, 0 ,0, splashImg.width, splashImg.height,
newX, newY, newWidth, newHeight);
Hier is code en een viool: 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="https://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="https://dl.dropbox.com/u/139992952/splash2.svg";
}
win.src="https://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>