Fatal编程技术网
  • javascript/
  • Javascript 如何在画布中移动对象时设置onclick事件？

Javascript 如何在画布中移动对象时设置onclick事件？

javascript css canvas html5-canvas

Javascript 如何在画布中移动对象时设置onclick事件？,javascript,css,canvas,html5-canvas,html2canvas,Javascript,Css,Canvas,Html5 Canvas,Html2canvas,如何在画布中移动对象时设置单击事件？还有如何在画布中从下到上移动对象。我是javascript新手，我将开发一个示例，比如当页面打开时，正方形和圆形等对象随机从页面底部移动到顶部 您需要建立一个数组，其中包含移动对象。当onclick处理程序启动时，检查单击的坐标是否在数组中的任何对象内 在每个动画帧上，通过从每个对象中减去一些y坐标向上移动对象 //画布的宽度和高度。。。 var rW=400； var-rH=500； var coinImage=getCoinImage（）； var co

如何在画布中移动对象时设置单击事件？还有如何在画布中从下到上移动对象。我是javascript新手，我将开发一个示例，比如当页面打开时，正方形和圆形等对象随机从页面底部移动到顶部

您需要建立一个数组，其中包含移动对象。当onclick处理程序启动时，检查单击的坐标是否在数组中的任何对象内

在每个动画帧上，通过从每个对象中减去一些y坐标向上移动对象

//画布的宽度和高度。。。
var rW=400；
var-rH=500；
var coinImage=getCoinImage（）；
var coinsOnScreen=[]；
var risingSpeed=100//每秒像素数。。。
var-coinSize=75；
var lastAnimationTime=0；
var Howlonguntinextcoin=1000；
var nextcinonscreen=0；
函数doDraw（）{
var can=document.getElementById（“myCanvas”）；
can.width=rW；
罐高=相对湿度；
var context=can.getContext（“2d”）；
//抹去画布
context.fillStyle=“#FFFFFF”；
fillRect（0，0，rW，rH）；
如果（新日期（）.getTime（）-nextCoinOnScreen>0）{
var newX=Math.floor（Math.random（）*rW）+1；
var newY=相对湿度+50；
var newCoin={
x:newX，
y:新的
};
硬币屏幕。推（新硬币）；
NEXTCINONSCLEEN=new Date（）.getTime（）+howlonguntinextcoin；
}
//现在画硬币
如果（lastAnimationTime！=0）{
var deltaTime=new Date（）.getTime（）-lastAnimationTime；
var coinRisePixels=数学地板（（deltaTime*risingSpeed）/1000）；
var生存币=[]；
对于（变量i=0；i0）{
上下文.drawImage（coinImage，coin.x，coin.y）；
//这枚硬币仍在屏幕上，因此将其升级到新阵列。。。
生存硬币。推（硬币）；
}
}
硬币屏幕=幸存的硬币；
}
lastAnimationTime=新日期（）.getTime（）；
//请稍候，然后再次调用此函数以设置动画：
setTimeout（函数（）{
多德劳（）；
}, 30);
}
函数setupClickHandler（）{
var can=document.getElementById（“myCanvas”）；
//这是onclick处理程序
can.onclick=函数（e）{
var x=e.clientX；
变量y=e.clientY；
var生存币=[]；
对于（变量i=0；icoin.x&&xcoin.y&&y

  • [css]相关文章推荐
    •