在画布上绘制(渐进式)油漆飞溅
Posted
技术标签:
【中文标题】在画布上绘制(渐进式)油漆飞溅【英文标题】:Draw a (progressive) paint splash on a canvas 【发布时间】:2013-04-04 19:47:45 【问题描述】:我正在寻找一种简单的方法,它可以让我在画布上绘制 paint splash 像这样:
一种方法是发射很多小粒子,这会画一个小圆圈,但我不想管理很多粒子对象。
编辑:example here:
jsfiddle.net/MK73j/4/
第二种方法是使用少量图像并操纵缩放和旋转,但我希望效果具有良好的随机性。
第三种方法是制作一些随机的小点,用贝塞尔曲线连接它们并填充内容,但我只有一个标记。
嗯,我不知道是否有更好的方法来产生看起来像这张图片的效果,或者我是否必须从我想到的 3 个中进行选择。
【问题讨论】:
你想要那些花哨的 3d-ish 阴影边缘,还是绘制形状就足够了? 目前形状已经够用了,我编辑了我的帖子,如果你想看一下我做的例子 【参考方案1】:您可以使用错觉来创建漂亮的飞溅效果。
由于对象在接近时会“增长”,因此您可以通过动画增加尺寸加上一点动作来创建喷溅效果。
您可以使用 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="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;
canvasborder: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>
【讨论】:
谢谢你的这个例子,它加入了我提出的第二个解决方案,但在我的例子中,它可能会播放很多飞溅,就像画家把它们扔在纸上一样(不知道你是否明白了吗)。也许我的例子会对你有所帮助:jsfiddle.net/MK73j/4 如你所见,这不是很好,因为我们看到粒子运动,或者我必须发射更多我不喜欢的粒子,因为性能原因。 刚刚遇到这个:blogs.msdn.com/b/ie/archive/2011/04/26/… 这太棒了。用一个像球体这样的预先破碎的物体开始它,然后在它碰到表面时立即将它交换到 splat 上呢?以上是关于在画布上绘制(渐进式)油漆飞溅的主要内容,如果未能解决你的问题,请参考以下文章
Android在画布上操纵图像 - 使用触摸,移动,放大/缩小,缩放
韩顺平循序渐进学Java零基础 项目篇(09161820222628)