1

線を引きたいのですが、同時に線を水平に描いて反射させます。したがって、ユーザーは2ストロークのように実行しています。問題は、キャンバスにコンテキストオブジェクトが1つしかないため、2つの別々のlineToコマンドで使用できないことです。この問題にどのように取り組むことができますか、またはこれにはアニメーションフレームが必要ですか？

ここに1行のコードTo：

[リンク] http://jsfiddle.net/FgNQk/1/

 var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var width  = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
    canvas.addEventListener('mousedown', function(e) {
        this.down = true;   
        this.X = e.pageX ;
        this.Y = e.pageY ;
        this.color = rgb();
    }, 0);
    canvas.addEventListener('mouseup', function() {
        this.down = false;          
    }, 0);
    canvas.addEventListener('mousemove', function(e) {

        if(this.down) {
             with(ctx) {
                beginPath();
                moveTo(this.X, this.Y);
                lineTo(e.pageX , e.pageY );
                strokeStyle = "rgb(0,0,0)";
                ctx.lineWidth=1;
                stroke();
             }
             this.X = e.pageX ;
             this.Y = e.pageY ;
        }
    }, 0);
4

1 に答える 1

1

一度に2つのラインパスを実行するには

  • 線分ポイントを配列に格納します。
  • 次に、各線分を元の形式と水平反射形式の両方で再描画します。

下の赤い線は、ユーザーの黒い線を横軸に反映したものです。 ここに画像の説明を入力してください

コードとフィドルは次のとおりです：http：//jsfiddle.net/m1erickson/XhUdS/

<!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; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

     var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     var width = window.innerWidth;
     var height = window.innerHeight;

     var points=[];
     var startingX;
     var startingY;

     canvas.height = height;
     canvas.width = width;
     canvas.addEventListener('mousedown', function (e) {
         this.down = true;
         this.X = e.pageX;
         this.Y = e.pageY;
         startingX=e.pageX;
         startingY=e.pageY;
         //this.color = rgb();
     }, 0);
     canvas.addEventListener('mouseup', function () {
         this.down = false;
         points=[];
     }, 0);
     canvas.addEventListener('mousemove', function (e) {
         if (this.down) {
             with(ctx) {
                 points.push({x:e.pageX,y:e.pageY});
                 drawWithHorizontalAxisReflection()
             }
         }
     }, 0);

      function drawWithHorizontalAxisReflection(){
          ctx.clearRect(0,0,canvas.width,canvas.height);
          ctx.lineWidth=3;
          for(i=1;i<points.length;i++){
              // the users line (black)
              ctx.beginPath();
              ctx.moveTo(points[i-1].x,points[i-1].y);
              ctx.lineTo(points[i].x,points[i].y);
              ctx.strokeStyle="black";
              ctx.stroke();
              // line reflected along horizontal axis (red)
              ctx.beginPath();
              ctx.moveTo(points[i-1].x,2*startingY-points[i-1].y);
              ctx.lineTo(points[i].x,2*startingY-points[i].y);
              ctx.strokeStyle="red";
              ctx.stroke();
          }
      }

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

</head>

<body>

    <canvas id="canvas" width=300 height=300></canvas>

</body>
</html>
于 2013-03-27T15:32:11.640 に答える