模拟贝塞尔曲线

二次贝塞尔曲线

image.png

可以快速生成二次、三次贝塞尔曲线的源码生成器，方便经常使用到canvas画图的同学使用，可以直接预览效果随意画出自己想要的图像。

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#0090D2";
ctx.beginPath();
ctx.moveTo(118, 264);
ctx.quadraticCurveTo(250, 100, 378, 264);
ctx.stroke();

三次贝塞尔曲线

image.png

/*绘制三次贝塞尔曲线 */
ctx.beginPath(); 
ctx.moveTo(50, 350); 
ctx.bezierCurveTo(120, 160, 300, 60, 340, 300); 
ctx.strokeStyle = "#f40"; 
ctx.stroke(); 

下面我们来模拟画着这样一张图

QQ20171227-222714-HD.gif

首先我们要画出两条连接小球的线，再画两个小球和贝塞尔曲线；
贝塞尔曲线的位置随小球的位置移动

html

<canvas id="mycanvas" width="500" height="500">
            您的浏览器不支持canvas
        </canvas>

css

canvas{
    border:2px solid #000000;
}

js里我们要判断鼠标当前点击的是哪一个小球，有两种判断方式

js

方式一：通过判断鼠标的位置与小球的圆心位置是否超过小球的半径

var canvas  = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        
        //x1,y1 红球坐标
        var x1 =100;
        var y1 =100;
        //篮球坐标 x2,y2
        var x2 =400;
        var y2 =400;
        //连接线
        draw(x1,y1,x2,y2)
        function draw(x1,y1,x2,y2){
            context.beginPath();
            context.moveTo(0,500);
            context.lineTo(x1,y1);
            context.strokeStyle = "#000000";
            context.lineWidth = "1";
            context.stroke();
            
            context.beginPath();
            context.moveTo(500,0);
            context.lineTo(x2,y2);
            context.strokeStyle = "#000000";
            context.lineWidth = "1";
            context.stroke();
            
            //红球
            context.beginPath();
            context.arc(x1,y1,10,0,Math.PI*2);
            context.fillStyle ="red";
            context.fill();
            
            //蓝球
            context.beginPath();
            context.arc(x2,y2,10,0,Math.PI*2);
            context.fillStyle ="cadetblue";
            context.fill();
            
            //
            
            context.beginPath();
            context.moveTo(500,0);
            context.lineTo(0,500);
            context.strokeStyle = "rgba(0,0,0,0.1)";
            context.lineWidth = "10";
            context.stroke();
            
            //画贝塞尔曲线
            
            context.beginPath();
            context.moveTo(0,500);
            context.bezierCurveTo(x1,y1,x2,y2,500,0);
            context.lineWidth=4;
            context.strokeStyle = "#000000";
            context.stroke();
        }
        
        
        
        //拖动小球做动画
        //判断是否拖动小球
        //如果在小球上做动画
        
        canvas.onmousedown = function(ev){
            var ev = window.event||ev;
            var x = ev.clientX-canvas.offsetLeft;
            var y = ev.clientY- canvas.offsetTop;
            //判断是否在红球上；
            var disRed = Math.pow((x-x1),2)+Math.pow((y-y1),2);
            if(disRed<100){
                console.log("在红球上")
                canvas.onmousemove = function(ev){
                    var ev = window.event||ev;
                    var xx = ev.clientX-canvas.offsetLeft;
                    var yy = ev.clientY- canvas.offsetTop;
                    //清除画布
                    context.clearRect(0,0,canvas.width,canvas.height);
                    x1 = xx;
                    y1 = yy;
                    //重绘制
                    draw(x1,y1,x2,y2)
                }
            }
            
            var disBlue = Math.pow((x-x2),2)+Math.pow((y-y2),2);
            //判断是否在蓝球上
            if(disBlue<100){
                console.log("在蓝球上")
                canvas.onmousemove = function(ev){
                    var ev = window.event||ev;
                    var xx = ev.clientX-canvas.offsetLeft;
                    var yy = ev.clientY- canvas.offsetTop;
                    //清除画布
                    context.clearRect(0,0,canvas.width,canvas.height);
                    x2 = xx;
                    y2 = yy;
                    //重绘制
                    draw(x1,y1,x2,y2)
                }
            }
            
        }
        
        document.onmouseup = function(){
            canvas.onmousemove = null;
        }

方式二：通过isPointInPath判断鼠标的位置是否在小球上

var canvas  = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        
        //x1,y1 红球坐标
        var x1 =100;
        var y1 =100;
        //篮球坐标 x2,y2
        var x2 =400;
        var y2 =400;
        //连接线
        draw(x1,y1,x2,y2)
        function draw(x1,y1,x2,y2){
            context.beginPath();
            context.moveTo(0,500);
            context.lineTo(x1,y1);
            context.strokeStyle = "#000000";
            context.lineWidth = "1";
            context.stroke();
            
            context.beginPath();
            context.moveTo(500,0);
            context.lineTo(x2,y2);
            context.strokeStyle = "#000000";
            context.lineWidth = "1";
            context.stroke();
            
            //bantoumingxian
            
            context.beginPath();
            context.moveTo(500,0);
            context.lineTo(0,500);
            context.strokeStyle = "rgba(0,0,0,0.1)";
            context.lineWidth = "10";
            context.stroke();
            
            //画贝塞尔曲线
            
            context.beginPath();
            context.moveTo(0,500);
            context.bezierCurveTo(x1,y1,x2,y2,500,0);
            context.lineWidth=4;
            context.strokeStyle = "#000000";
            context.stroke();
            
            

        }
        red(x1,y1);
        function red(x1,y1){
            //红球
            context.beginPath();
            context.arc(x1,y1,10,0,Math.PI*2);
            context.fillStyle ="red";
            context.fill();
        }
        blue(x2,y2);
        //蓝球
        function blue(x2,y2){
            context.beginPath();
            context.arc(x2,y2,10,0,Math.PI*2);
            context.fillStyle ="cadetblue";
            context.fill();
        }
        //拖动小球做动画
        //判断是否拖动小球
        //如果在小球上做动画
        
        canvas.onmousedown = function(ev){
            console.log("按下了")
            var ev = window.event||ev;
            var x = ev.clientX-canvas.offsetLeft;
            var y = ev.clientY- canvas.offsetTop;
            console.log(x,y);
            context.clearRect(0,0,canvas.width,canvas.height);
            //红球
            draw(x1,y1,x2,y2);
            red(x1,y1)
            if(context.isPointInPath(x,y)){
                console.log("在红球里");
                canvas.onmousemove = function(ev){
                    var ev = window.event||ev;
                    var xx = ev.clientX-canvas.offsetLeft;
                    var yy = ev.clientY- canvas.offsetTop;
                    //清除画布
                    context.clearRect(0,0,canvas.width,canvas.height);
                    x1 = xx;
                    y1 = yy;
                    //重绘制
                    draw(x1,y1,x2,y2);
                    red(x1,y1);
                    blue(x2,y2);
                }
            }
            
            //蓝球
            blue(x2,y2)
            if(context.isPointInPath(x,y)){
                console.log("在蓝色里");
                canvas.onmousemove = function(ev){
                    var ev = window.event||ev;
                    var xx = ev.clientX-canvas.offsetLeft;
                    var yy = ev.clientY- canvas.offsetTop;
                    //清除画布
                    context.clearRect(0,0,canvas.width,canvas.height);
                    x2 = xx;
                    y2 = yy;
                    //重绘制
                    draw(x1,y1,x2,y2);
                    red(x1,y1);
                    blue(x2,y2);
                }
            }
        }
        
        document.onmouseup = function(){
            canvas.onmousemove = null;
        }