js 想做一个div弹窗可是老没响应那位大牛给看看

最新推荐文章于 2024-09-11 17:25:08 发布

IT一哥

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量662

点赞数

文章标签： html5 canvas javascript div css

本文链接：https://blog.csdn.net/u013215581/article/details/17417939

版权

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<style>
body {
background: #eeeeee;
}
.floatingControls {
position: absolute;
left: 150px;
top: 100px;
width: 300px;
padding: 20px;
border: thin solid rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 200, 0.1);
color: blue;
font: 14px Arial;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
display: none;
}
.floatingControls p {
margin-top: 0px;
margin-bottom: 20px;
}
#controls {
position: absolute;
left: 25px;
top: 25px;
}
#canvas {
background: #ffffff;
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
</style>

<script type="text/javascript">
var canvas=document.getElementById('canvas');
var instructions = document.getElementById('instructions');
var instructionsOkayButton = document.getElementById('instructionsOkayButton');
var instructionsNoMoreButton = document.getElementById('instructionsNoMoreButton');
var polygons=[];
// ctx声明在外面
var ctx;
var showInstructions = true;
function renderVessels(){
var canvas=document.getElementById('canvas');
ctx = canvas.getContext('2d');

for (var i = 0; i < 10; i++) {
a= Math.random()*canvas.width
b= Math.random()*canvas.height
var polygon =new Polygon(a, b, ctx.strokeStyle, ctx.fillstyle)
ctx.beginPath();
polygon.createPath(ctx);
ctx.fillStyle = "#00FF00";

polygon.fill(ctx);
ctx.closePath();
polygons.push(polygon);
}
}
//多边形建立
var Point = function(x,y){
this.x= x;
this.y=y;
}
var Polygon = function (centerX, centerY, strokeStyle, fillStyle) {
this.x = centerX;
this.y = centerY;
//this.vesselnum = vesselnum;

this.strokeStyle = strokeStyle;
this.fillStyle = fillStyle;
}
Polygon.prototype={

getPoints: function(){
var points=[];
for (var i=0; i < 10; ++i) {
points.push(new Point(this.x,this.y));
}
return points;
},
createPath: function(ctx){
var points=this.getPoints();
ctx.beginPath();
for (var i=0; i < 10; ++i) {
ctx.arc(points[i].x,points[i].y,15,0,Math.PI*2,false);
}
ctx.closePath();
},
fill: function(ctx) {
ctx.save();
this.createPath(ctx);
ctx.fillStyle = this.fillStyle;
ctx.fill();
ctx.restore();
},
stroke: function(ctx){
ctx.save();
this.createPath(ctx);
ctx.strokeStyle = this.strokeStyle;
ctx.stroke();
ctx.restore();
}
}
function windowToCanvas(x, y) {
var canvas=document.getElementById('canvas');
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}

window.onload = function(){
var currentC, isCurrentC;
var canvas=document.getElementById('canvas');
var oDiv = document.getElementById('div1');

renderVessels();
canvas.onmousemove = function (e) {
e = e || event;
var loc = windowToCanvas(e.clientX, e.clientY);
e.preventDefault(); // prevent cursor change
var html = '';
for (var i = 0; i < polygons.length; i++) {

polygons[i].createPath(ctx);

if (currentC){
ctx.fillStyle = "#00FF00";polygons[a].fill(ctx);currentC=null;
}
else if ((ctx.isPointInPath(loc.x, loc.y)&&!currentC)){

ctx.fillStyle = "#FF0000";polygons[i].fill(ctx);
html = "123" + loc.x + "+" + loc.y+"+" +polygons[i].x;
currentC=true;
a=i;
break;}
else{ ctx.fillStyle = "#00FF00";polygons[i].fill(ctx);html = "qwwe" + loc.x + "+" + loc.y;}
}

oDiv.innerHTML = html;
}

canvas.οnmοuseup=function(e){
if (showInstructions) {
instructions.style.display = 'inline';
}
instructionsOkayButton.onclick = function (e) {
instructions.style.display = 'none';
};

instructionsNoMoreButton.onclick = function (e) {
instructions.style.display = 'none';
showInstructions = false;
};
}
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="500" style="border: 5px blue solid "></canvas>

<div id='instructions' class='floatingControls'>
<p>Drag the curve end- and control points to
change the shape of the curve.</p>

<p>When you are done dragging end- and control points,
click outside of the points to finalize the curve.</p>

<input id='instructionsOkayButton' type='button' value='Okay' autofocus/>
<input id='instructionsNoMoreButton' type='button'
value='Do not show these instructions again'/>
</div>

<div id="div1"; > </div>
</body>
</html>