贝塞尔曲线

最新推荐文章于 2024-04-08 08:04:14 发布

liugang0605

最新推荐文章于 2024-04-08 08:04:14 发布

阅读量187

点赞数

分类专栏： js 动画

本文链接：https://blog.csdn.net/power8988/article/details/77770124

版权

js 同时被 2 个专栏收录

113 篇文章 2 订阅

订阅专栏

动画

10 篇文章 0 订阅

订阅专栏

<!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.bezierCurveTo(a.x-10,a.y/2,(a.x+b.x)/2,(a.y+b.y)/2,b.x,b.y);
        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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

liugang0605

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
贝塞尔曲线

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>commu</title> <style> canvas { background: #aaa; } </style></head><body><canvas id="
复制链接

扫一扫