0

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

div id="container" align='left'

在画布标签中， 

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

2 回答 2

1

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

你可以尝试从这里开始学习。

于 2013-06-05T10:33:49.140 回答
1

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

当然，无论您想拖动/绘制到椭圆中的任何内容都取决于您的项目要求。

在此处输入图像描述

此函数在给定顶部、左侧和宽度的情况下绘制一个椭圆。

几点注意事项：

  • 这实际上是椭圆的近似值，而不是数学椭圆。
  • 高度由函数确定。
  • 该函数返回椭圆的 endX 和 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>
于 2013-06-05T15:23:13.997 回答