在画布上绘制(渐进)绘画飞溅
Raz*_*lle 8 javascript html5 drawing canvas html5-canvas
我正在寻找一种简单的方法,它可以在画布上画一个像这样的油漆:
一种方法是发射大量小颗粒,这些小颗粒会画一个小圆圈,但我不想管理很多粒子对象.
编辑:example here: jsfiddle.net/MK73j/4/
第二种方法是拥有少量图像并操纵比例和旋转,但我希望在效果上有一个很好的随机性.
第三种方法是制作一些随机的小点,用贝塞尔曲线连接它们并填充内容,但我只有一个标记.
好吧,我不知道是否有更好的方法来产生看起来像这个图像的效果,或者如果我必须选择我想到的3.
您可以使用幻觉来创建漂亮的泼溅效果。
\n\n由于对象 \xe2\x80\x9cgrow\xe2\x80\x9d 当它们接近时，您可以动画增加尺寸加上一点运动来创建您的泼溅效果。
\n\n您可以使用 context.drawImage 来处理调整大小：
\n\ncontext.drawImage(splashImg, 0 ,0, splashImg.width, splashImg.height, \n newX, newY, newWidth, newHeight);\n这是代码和小提琴：http ://jsfiddle.net/m1erickson/r8Grf/
\n\n<!doctype html>\n<html>\n<head>\n<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->\n<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>\n\n<style>\n body{ background-color: ivory; }\n canvas{border:1px solid red;}\n</style>\n\n<script>\n $(function(){\n\n var canvas=document.getElementById("canvas");\n var ctx=canvas.getContext("2d");\n\n window.requestAnimFrame = (function(callback) {\n return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||\n function(callback) {\n window.setTimeout(callback, 1000 / 60);\n };\n })();\n\n $("go").html("Loading...");\n\n var count=80;\n var win=new Image();\n var splash;\n win.onload=function(){\n splash=new Image();\n splash.onload=function(){\n ctx.drawImage(win,0,0);\n }\n splash.src="http://dl.dropbox.com/u/139992952/splash2.svg";\n }\n win.src="http://dl.dropbox.com/u/139992952/window.png";\n\n $("#go").click(function(){ count=80; animate(); });\n\n function animate() {\n // drawings\n if(--count>1){\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.save();\n ctx.drawImage(win,0,0);\n ctx.globalCompositeOperation = \'destination-over\';\n ctx.drawImage(splash,0,0,splash.width,splash.height,25,25,splash.width/count,splash.height/count);\n ctx.restore();\n }\n\n // request new frame\n requestAnimFrame(function() {\n animate();\n });\n }\n\n }); // end $(function(){});\n</script>\n\n</head>\n\n<body>\n <br/><button id="go">Splash!</button><br/><br/>\n <canvas id="canvas" width=326 height=237></canvas>\n</body>\n</html>\n