<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html,body{ margin:0; padding:0;}
</style>
</head>
<body>
<canvas id="cvs" width="300" height="300" style="border:1px solid #333;">你的浏览器不支持canvas,狗日的IE。</canvas>
<div id="log"></div>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext('2d');
if(ctx){
var objs = [];
var CCircle = function(){
this.type = 'circle';
this.x = 0;
this.y = 0;
this.radius = 0;
this.isHover = false;
this.color = '#000';
};
var Draw = function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
for(var i=0;i<objs.length;i++){
if(objs[i].type='circle'){
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = objs[i].color;
ctx.arc(objs[i].x,objs[i].y,objs[i].radius,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
}
}
}// end function
for(var i=0;i<100;i++){
var c = new CCircle();
c.x = (Math.random()*300)|0;
c.y = (Math.random()*300)|0;
c.radius = 10;
c.hover = function(){
this.color = "#f00";
Draw();
}
c.out = function(){
this.color = "#000";
Draw();
}
objs.push(c);
}// end for
Draw();
cvs.onmousemove = function(e){
var hasHover = false;
for(var i=objs.length-1;i>-1;i--){
var c = objs[i];
if(((e.clientX-c.x)*(e.clientX-c.x)+(e.clientY-c.y)*(e.clientY-c.y)<=c.radius*c.radius) && (!hasHover)){
c.isHover = true;
hasHover = true;
c.hover && c.hover();
}else{
if(c.isHover){
c.isHover = false;
c.out && c.out();
}
}//end if
}// end for
}// end function
}
</script>
</body>
</html>
分享到:
相关推荐
html5 canvas模拟的见缝插针小游戏源码 html5 canvas模拟的见缝插针小游戏源码
html5 canvas模拟满天星空背景动画特效
Canvas模拟磁场吸引动画特效是一款基于html5 canvas制作的科幻虚拟磁场动力吸引背景动画特效。
前段时间做一个基于html5的活动页面,清明时节雨纷纷,就在网上找了一个模拟下月的插件,做了一些修改,然后客户很满意,我也很开心
html5 canvas 模拟Windows 画图程序,初看上去,你会不会觉得这就是windows 的画图程序呢?界面和功能布局几乎是一样的,而且用起来也和Windows画图没啥区别,真心模拟的很像。运用Canvas技术来实现的画图程序。
HTML5 Canvas模拟机场线路图特效是一款随机生成6个点,线线连接动画特效。
HTML5 Canvas模拟衣服撕扯动画 超级逼真.rar.rar
一款炫酷逼真的HTML5 Canvas模拟下雨动画场景,雨滴从空中飘落,落在地上溅起水花动画特效。可以通过鼠标控制风向和雨水强度。
thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟。并且它还具有定时闹钟的功能。掩饰地址:http://www.jq22.com/jquery-info3928
今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真。刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当你拖拽的很用力时,你会发现,衣服被撕破了。该HTML5动画会捕获到鼠标...
HTML5 Canvas模拟下雨动画场景</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/reset.min.css?3.1.64"> <link ...
HTML5作为最先进的浏览器技术,可以创造出很多不同凡响的特效应用,尤其是3D动画更是轻而易举,大家可以在之前我们分享...今天要分享的这款HTML5 Canvas模拟翻滚动画特效给你呈现了不一样的3D视觉特效,一起来欣赏吧。
基于canvas 2D画布绘制圆形的雷达界面扫描动画,带波信号坐标提示效果特效。
通过H5的canvas模拟绘制的动态时钟,内含代码
HTML5 canvas模拟万花筒动画特效,是一连串的动画效果,很漂亮,你甚至会有点不相信这不是Flash,这就是网页生成的动画效果,很流畅,利用折纸的创意生成的Canvas万花筒特效动画,分享给喜欢HTML5特效的朋友参考。
html5 canvas模拟机场线路图动画特效.zip
1、构造方法第一个参数支持传入canvas dom对象的id,既可以传canvas dom对象也可以传此dom对象的id。 2、增加setOptions方法,方便动态更新模拟时钟的属性。 3、修复传入options没有验证属性值的BUG,若传入的...
我先来讲下实现原理:其实就是canvas绑定相关事件,在通过记录图片所在canvas的坐标,判断事件作用于哪个图片中。这样讲是不是感觉跟事件代理有点相似咧。不过实现起来还是有稍许复杂的。 ps:下面的代码我是用ts写...
用jscanvas模拟Phigros显示___下载.zip
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers