html5 canvas 画了一条直线，现在鼠标经过这条直线触发某一事件，如何确定鼠标经过这条直线呢？

这个玩意有点复杂。首先要获取点击发生鼠标所在的坐标。然后判断这个坐标是否在图形的范围内。如果在，刚可以视为点击了该图形。图形本身是不能响应事件的。必须用canvas代理。只是要判断的情况有时候很复杂。如果这个点所在的位置有多个图形。这就需要判断到底是具体的哪个。这就需要重绘图，绘一次判断一次。但这样就可能产生DOM的事件冒泡那样的情况。所以。。。要做好这个东西。面对的情况是相当复杂的。建议还是多找找资料。做做测试。

你好，将图片绘制到canvas之后，原图片上的所有属性和方法以及时间在canvas上的图片上都将不再产生作用，因为图片在canvas是以像素的形式存在，而不是DOM元素。如果一定要用，这需要将时间绑定到canvas上，并且画板上的内容清除之后再重新绘制一幅带有边框的图片（这里需要作一些绘图运算）

HTML5+JavaScript+CSS3实现下拉列表以及折叠功能

[javascript] view plain copy

function show(id){

var d = $('#content'+id).css('display')

if(d == 'block'){

$('#content'+id).css('display','none')

$('#img'+id).attr('src','img/bottom.png')

}else if(d == 'none'){

$('.drop_down_content').each(function(){

$(this).css('display','none')

$('.drop_down_list img').attr('src','img/bottom.png')

})

$('#content'+id).css('display','block')

$('#img'+id).attr('src','img/top.png')

}

[html] view plain copy

<div class="drop_down_list" onclick="show('1')">

<a>svg</a>

<img id="img1" src="img/top.png"/>

</div>

<ul class="drop_down_content" id="content1" style="display:block">

<li>姓名 <a>李雷</a></li>

</ul>

<div class="drop_down_list" onclick="show('2')">

<a>动画</a>

<img id="img2" src="img/bottom.png"/>

</div>

<ul class="drop_down_content" id="content2" style="display:none">

<li>父亲 <a>李大宝</a></li>

</ul>

[css] view plain copy

ul{

list-style-type: none

-webkit-margin-before: 0px

-webkit-margin-after: 0px

-webkit-margin-start: 0px

-webkit-margin-end: 0px

-webkit-padding-start: 0px

-webkit-padding-after: 0px

}

.drop_down_list{

width:100%

height:44px

border-bottom: 1px solid #D9D9D9

}

.drop_down_list a{

display: inline-block

height:44px

width:100px

background: url(../img/biaozhu.png) 0px 13px no-repeat

background-size: 6px 20px

padding-left: 25px

padding-top: 12px

color: #0085d0

}

.drop_down_list img{

float: right

height:15px

margin: 15px 20px

}

.drop_down_content a{

color: #AAAAAA

display: inline-block

float: right

margin-right: 8%

}

.drop_down_content li{

height:38px

width:94%

color: #353535

margin-left: 3%

margin-right: 3%

padding-top: 15px

padding-left: 20px

border-bottom: 1px solid #D9D9D9

}

---