Javascript HTML5如何使用鼠标事件（在上方，单击）绘制组件
我想在功能下面Javascript HTML5如何使用鼠标事件（在上方，单击）绘制组件,javascript,html,events,canvas,mouse,Javascript,Html,Events,Canvas,Mouse,我想在功能下面 添加到鼠标事件（在上方，单击）绘制的组件 莱恩托 将鼠标悬停在或单击绘制的直线上，显示消息 再来一个。。可以运行IE11，Chrome，Safari [原代码。] <%@ page import="java.util.*" %> <%@ page import="java.sql.*" %> <!doctype html> <html> <h
- 莱恩托
- 将鼠标悬停在或单击绘制的直线上，显示消息
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="../css/style.css" /> <!-- reset css -->
<script src="../js/jquery.min.js"></script>
<script src="../js/jspdf.debug.js"></script>
<style>
body{ background-color: white; }
canvas{border:1px solid red;}
html, body {
width: 100%;
height: 100%;
margin:0px 0px 0px 10px;
}
footer{display:block; border-top:1px solid orange;margin:10px;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; font-weight:bold;}
article{display:block; font-family:Georgia,"Times New Roman",Times, serif; margin:5px;}
</style>
<script>
$(document).ready(function()
{
$('body').hide().fadeIn(1000);
});
</script>
<%
int chrcount = 10; //servlet return
%>
<img id="canvasImg">
<canvas id="canvas" width="<%=chrcount*200%>" height="2000" style="display:none;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var start_position = 100;
var end_position = 200;
var RGBcolor = [];
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
<%
DBManagerPepper dbmanagerpepper = new DBManagerPepper();
String chrLength_sql = null;
String bpLength_sql = null;
String alignment_sql = null;
String cMLength_sql = null;
String AllChr_sql = null;
String organismCode = request.getParameter("organismCode") ; //servlet return
int canvasWidth = chrcount * 500;
//cM length
AllChr_sql = "select distinct ch_no from geneticmap_info_t";
try{
dbmanagerpepper.rs=dbmanagerpepper.stmt.executeQuery(AllChr_sql);
}catch(Exception e){
System.out.println(e);
}
while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) {
int R = (int)(Math.random()*256);
int G = (int)(Math.random()*256);
int B= (int)(Math.random()*256);
String RGB = R+","+G+","+B;
//System.out.println(RGB);
//RGBcolor.put(dbmanagerpepper.rs.getString("ch_no"), RGB);
%>
RGBcolor.push({ch_no:'<%=dbmanagerpepper.rs.getString("ch_no")%>',rgb:'<%=RGB%>'});
<%
}
%>
//alert(RGBcolor[1].rgb);
<%
for(int i=1;i<chrcount;i++){
%>
var i = <%=i%>
<%
//cM length
cMLength_sql = "select max(position) as max_cM_position from geneticmap_info_t where organismcode='"+organismCode+"' and ch_no='"+i+"'";
try{
dbmanagerpepper.rs=dbmanagerpepper.stmt.executeQuery(cMLength_sql);
}catch(Exception e){
System.out.println(e);
}
%>
var cM_length = <% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %><%=dbmanagerpepper.rs.getInt("max_cM_position")%><% } %>;
<%
//bp length
bpLength_sql = "select max(cov_position) as max_cov_position from physicalmap_info_t where organismcode='"+organismCode+"' and lg_no='"+i+"'";
try{
dbmanagerpepper.rs=dbmanagerpepper.stmt.executeQuery(bpLength_sql);
}catch(Exception e){
System.out.println(e);
}
%>
var bp_length = <% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %><%=dbmanagerpepper.rs.getInt("max_cov_position")%><% } %>;
<%
//align(cM-bp)
//alignment_sql = "select a.markername as physicalmap_markername, a.lg_no as physicalmap_lg_no, a.cov_position as physicalmap_cov_position, b.ch_no as geneticmap_ch_no, b.position as geneticmap_position from physicalmap_info_t a, geneticmap_info_t b where a.lg_no='"+i+"' and a.organismcode='"+organismCode+"' and a.organismcode=b.organismcode and a.lg_no=b.ch_no and a.markername=b.markername order by a.markerseq;";
alignment_sql = "select a.markername as physicalmap_markername, a.lg_no as physicalmap_lg_no, a.cov_position as physicalmap_cov_position, b.ch_no as geneticmap_ch_no, b.position as geneticmap_position from physicalmap_info_t a, geneticmap_info_t b where a.lg_no='"+i+"' and a.organismcode='"+organismCode+"' and a.organismcode=b.organismcode and a.markername=b.markername order by a.markerseq;";
try{
dbmanagerpepper.rs=dbmanagerpepper.stmt.executeQuery(alignment_sql);
}catch(Exception e){
System.out.println(e);
}
%>
var physicalmap_markername = [
<% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
'<%=dbmanagerpepper.rs.getString("physicalmap_markername")%>',
<% } %>
];
<%
dbmanagerpepper.rs.beforeFirst();
%>
var physicalmap_lg_no = [
<% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
<%=dbmanagerpepper.rs.getInt("physicalmap_lg_no")%>,
<% } %>
];
<%
dbmanagerpepper.rs.beforeFirst();
%>
var physicalmap_cov_position = [
<% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
<%=dbmanagerpepper.rs.getInt("physicalmap_cov_position")%>,
<% } %>
];
<%
dbmanagerpepper.rs.beforeFirst();
%>
var geneticmap_ch_no = [
<% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
<%=dbmanagerpepper.rs.getInt("geneticmap_ch_no")%>,
<% } %>
];
<%
dbmanagerpepper.rs.beforeFirst();
%>
var geneticmap_position = [
<% while (dbmanagerpepper.rs!=null && dbmanagerpepper.rs.next()) { %>
<%=dbmanagerpepper.rs.getInt("geneticmap_position")%>,
<% } %>
];
<%
dbmanagerpepper.rs.beforeFirst();
%>
orfSize = canvasWidth*(<%=chrcount*5%>);
ctx.lineWidth=12;
var offset = 2500000;
var start=offset;
var end=bp_length+offset;
ctx.beginPath();
ctx.fillStyle = "rgb("+RGBcolor[i-1].rgb+")";
ctx.font = "bold 12pt Courier";
ctx.textBaseline = 'Top';
ctx.fillText("Chr"+i,start_position-30,20);
ctx.strokeStyle ="rgb("+RGBcolor[i-1].rgb+")";
ctx.moveTo(start_position,start/orfSize);
ctx.lineTo(start_position,end/orfSize);
ctx.stroke();
var end=cM_length+offset;
ctx.beginPath();
ctx.strokeStyle ='rgb(1,176,241)';
ctx.moveTo(end_position,start/orfSize);
ctx.lineTo(end_position,end/orfSize);
ctx.stroke();
ctx.fillStyle = 'rgb(144,167,198)';
ctx.font = "bold 12pt Courier";
ctx.textBaseline = 'Top';
ctx.fillText("cM",end_position,end/orfSize+10);
var count=1;
for( k=0;k<physicalmap_lg_no.length;k++){
var start=physicalmap_cov_position[k]+offset;
var end=geneticmap_position[k]+offset;
ctx.beginPath();
if(physicalmap_lg_no[k] == geneticmap_ch_no[k]){
ctx.lineWidth = 0.7;
ctx.strokeStyle ="rgb(144,167,198)";
ctx.moveTo(start_position+5,start/orfSize);
ctx.lineTo(start_position+95,end/orfSize);
ctx.stroke();
}
else{
if(geneticmap_ch_no[k] != i){
ctx.strokeStyle ="rgb("+RGBcolor[geneticmap_ch_no[k]-1].rgb+")";
ctx.lineWidth=13;
ctx.moveTo(start_position-15,start/orfSize);
ctx.lineTo(start_position-15,(start+100000)/orfSize);
ctx.stroke();
}
}
count = count+1;
}
for( k=0;k<physicalmap_lg_no.length;k++){
var start=physicalmap_cov_position[k]+offset;
var end=geneticmap_position[k]+offset;
var start_position_align = 100;
var end_position_align = 200;
ctx.beginPath();
if(physicalmap_lg_no[k] == geneticmap_ch_no[k]){
ctx.lineWidth = 0.7;
ctx.strokeStyle ="rgb(144,167,198)";
ctx.moveTo(start_position+5,start/orfSize);
ctx.lineTo(start_position+95,end/orfSize);
ctx.stroke();
}
else{
if(geneticmap_ch_no[k] != i){
start_position_align = start_position_align+((geneticmap_ch_no[k]-1)*200);
end_position_align = end_position_align+((geneticmap_ch_no[k]-1)*200);
//alert(((geneticmap_ch_no[k]-1)*200));
ctx.strokeStyle ="rgb("+RGBcolor[physicalmap_lg_no[k]-1].rgb+")";
ctx.lineWidth=13;
ctx.moveTo(end_position_align+15,end/orfSize);
ctx.lineTo(end_position_align+15,(end+100000)/orfSize);
ctx.stroke();
}
}
count = count+1;
}
start_position = start_position+200;
end_position = end_position+200;
<%
}
%>
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
</script>
</html>
正文{背景色：白色；}
画布{边框：1px纯红；}
html，正文{
宽度：100%；
身高：100%；
保证金：0px 0px 0px 10px；
}
页脚{显示：块；上边框：1px纯橙色；边距：10px；字体系列：“Trebuchet MS”，Arial，Helvetica，无衬线；字体重量：粗体；}
文章{显示：块；字体系列：乔治亚州，“泰晤士报新罗马”，泰晤士报，衬线；边距：5px；}
$（文档）.ready（函数（）
{
$（'body'）.hide（）.fadeIn（1000）；
});
你的问题不清楚-（对不起，我重写了原始的完整源代码。