如何从查看器角度将项目拖放到画布上？

Question

Where can I find an example of dropping items on a canvas? 在哪里可以找到在画布上放置物品的示例？ The idea is that from viewer perspective stains/drops fall on the canvas. 这个想法是从观看者的角度来看，污点/滴落在画布上。 How can I achieve this? 我该如何实现？ Any help please. 请帮忙。

Where to start? 从哪儿开始？ the only thing I found what came near the idea was: http://threedubmedia.com/code/event/drop and then the live option. 我唯一发现的想法是： http : //threedubmedia.com/code/event/drop ，然后是live选项。

Answer 1

Here is an example of how to add a couple of coffee stains to the canvas: 这是一个如何在画布上添加咖啡渍的示例：

在此处输入图片说明

This is code for the coffee stain and a Fiddle: http://jsfiddle.net/m1erickson/jkK7L/ 这是咖啡渍和小提琴的代码： http : //jsfiddle.net/m1erickson/jkK7L/

<!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(){

    // get hold of the canvas
    var canvas=document.getElementById("canvas");
    // get hold of the canvas's context, which we use to draw with
    var context=canvas.getContext("2d");

    // ask for a new image
    var img=new Image();
    // wait for the image to load 
    img.onload=function(){
      // draw the coffee stains on the canvas using the context
      context.drawImage(img,0,0,img.width,img.height,50,50,100,100);
    }
    // tell the new image we asked for above where to find the image file
    // note: strangely, this must come after img.onload
    img.src="http://dl.dropbox.com/u/139992952/coffee-stain.png";

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Here is a neat simulation of water rippling on the canvas: 这是画布上水波纹的巧妙模拟：

Click on the canvas to see the ripple effect: http://www.script-tutorials.com/demos/97/index.html 单击画布上以查看涟漪效应： http : //www.script-tutorials.com/demos/97/index.html

And here is an example of a splat animation 这是splat动画的示例

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/r8Grf/ 这是代码和小提琴： 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(){ alert("go"); 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>

如何从查看器角度将项目拖放到画布上？

问题描述

1 个解决方案

解决方案1
0 2013-03-12 22:20:18

如何从查看器角度将项目拖放到画布上？

问题描述

1 个解决方案

解决方案1 0 2013-03-12 22:20:18

解决方案1
0 2013-03-12 22:20:18