<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>commu
</title>
<style>
canvas {
background: #aaa;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function Img(src,x,y){
this.src=src;
this.x=x;
this.y=y
}
Img.prototype.draw=function(){
var img = new Image();
img.src = this.src;
ctx.drawImage(img, this.x,this.y, 30, 30);
}
var src="img/station.png";
var img1=new Img(src,50,150);
img1.draw();
var img2=new Img(src,150,250);
img2.draw();
var img3=new Img(src,350,100);
img3.draw();
function connect(a,b){
ctx.beginPath();
ctx.moveTo(a.x,a.y);
ctx.strokeStyle="#e4393c";
ctx.quadraticCurveTo((a.x+b.x)/2,(b.y-a.y)/2,b.x,b.y);
ctx.stroke();
}
connect(img1,img2);
connect(img1,img3);
connect(img2,img3);
</script>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-69312.html
