如何從查看器角度將項目拖放到畫布上？
[英]How to drop items on canvas from viewer perspective?
問題描述
在哪里可以找到在畫布上放置物品的示例？ 這個想法是從觀看者的角度來看，污點/滴落在畫布上。 我該如何實現？ 請幫忙。
從哪兒開始？ 我唯一發現的想法是： http : //threedubmedia.com/code/event/drop ，然后是live選項。
1 個解決方案
解決方案1
0 2013-03-12 22:20:18
這是一個如何在畫布上添加咖啡漬的示例：
這是咖啡漬和小提琴的代碼： 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>
這是畫布上水波紋的巧妙模擬：
單擊畫布上以查看漣漪效應： http : //www.script-tutorials.com/demos/97/index.html
這是splat動畫的示例
這是代碼和小提琴： 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>
使用jQuery，如何清除畫布上的項目？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.