Question

我正在使用HTML5。有人可以帮我在画面上对齐画布。最初我使用div标签放置箭头。现在我需要在箭头后面得到一个椭圆。我用过canvas标签。但它没有用。谁能指导我？我需要放置多个对象，所以我使用了canvas。谢谢。
在div标签中，

div id="container" align='left'

在canvas标签中，

 canvas id="myCanvas" left="210" top="210" width="1000" height="200"

Answer 1

如果你正在谈论对齐 - 意思是 - "the ellipse after the arrow"，如果说"I need to place multiple objects and so I used canvas."你的意思是你希望箭头和椭圆在画布上，那么你会需要使用Javascript及其API来操作画布。

您可以尝试从here开始学习它。

Answer 2

如何绘制由箭头线连接的椭圆

当然，您想要拖动/绘制到省略号中的任何内容都取决于您的项目要求。

enter image description here

此函数绘制一个给定顶部，左侧和宽度的椭圆。

一些注意事项：

这实际上是椭圆的近似值 - 而不是数学椭圆。
高度由功能确定。
该函数返回椭圆的endingX和centerY（在连接连接器时很有用）

    function drawEllipse(x,cy,width) {
      // x=left, cy=vertical center of ellipse
      // note: just an approximation of an ellipse
      var height=width*0.40;
      ctx.beginPath();
      ctx.moveTo(x, cy);
      ctx.bezierCurveTo(
        x+width/2*.05, cy-height,
        x+width-width/2*.05, cy-height,
        x+width, cy);
      ctx.bezierCurveTo(
        x+width-width/2*.05, cy+height,
        x+width/2*.05, cy+height,
        x, cy);
      ctx.closePath();  
      ctx.stroke();
      return({x:x+width,y:cy});
    }

此功能绘制带有可选开始和结束箭头的连接线

    function drawConnector(startX,startY,endX,endY,hasStartArrow,hasEndArrow){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
        if(hasStartArrow){
            var startRadians=Math.atan((endY-startY)/(endX-startX));
            startRadians+=((endX>startX)?-90:90)*Math.PI/180;
            drawArrow(startX,startY,startRadians);
        }
        if(hasEndArrow){
                var endRadians=Math.atan((endY-startY)/(endX-startX));
                endRadians+=((endX>startX)?90:-90)*Math.PI/180;
                drawArrow(endX,endY,endRadians);
        }
    }

    function drawArrow(x,y,radians){
        ctx.save();
        ctx.beginPath();
        ctx.translate(x,y);
        ctx.rotate(radians);
        ctx.moveTo(0,0);
        ctx.lineTo(6,20);
        ctx.lineTo(-6,20);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

这是代码和小提琴：http://jsfiddle.net/m1erickson/vnvhQ/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:15px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // holds the right/vertical-center point of the last ellipse or connector 
    var point;

    point=drawEllipse(20,50,100);
    point=drawConnector(point.x,point.y,250,100,true,true);
    point=drawEllipse(point.x,point.y,100);


    // x=left, cy=vertical center of ellipse
    function drawEllipse(x,cy,width) {
      // note: just an approximation of an ellipse
      var height=width*0.40;
      ctx.beginPath();
      ctx.moveTo(x, cy);
      ctx.bezierCurveTo(
        x+width/2*.05, cy-height,
        x+width-width/2*.05, cy-height,
        x+width, cy);
      ctx.bezierCurveTo(
        x+width-width/2*.05, cy+height,
        x+width/2*.05, cy+height,
        x, cy);
      ctx.closePath();  
      ctx.stroke();
      return({x:x+width,y:cy});
    }

    function drawConnector(startX,startY,endX,endY,hasStartArrow,hasEndArrow){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
        if(hasStartArrow){
            var startRadians=Math.atan((endY-startY)/(endX-startX));
            startRadians+=((endX>startX)?-90:90)*Math.PI/180;
            drawArrow(startX,startY,startRadians);
        }
        if(hasEndArrow){
                var endRadians=Math.atan((endY-startY)/(endX-startX));
                endRadians+=((endX>startX)?90:-90)*Math.PI/180;
                drawArrow(endX,endY,endRadians);
        }
        return({x:endX,y:endY});
    }

    function drawArrow(x,y,radians){
        ctx.save();
        ctx.beginPath();
        ctx.translate(x,y);
        ctx.rotate(radians);
        ctx.moveTo(0,0);
        ctx.lineTo(6,20);
        ctx.lineTo(-6,20);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=400 height=200></canvas>
</body>
</html>

使用HTML5对齐画布

2 个答案: