Question

我想绘制一条线，同时这条线应该被水平反射。所以用户就像2笔画一样。问题是画布只有一个上下文对象，两个单独的lineTo命令无法使用它。我该如何处理这个问题，还是需要一个动画框？

这里是一行代码：

 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);

Answer 1

一次执行2行路径

将您的线段点存储在数组中。
然后以原始和水平反射的形式重绘每个线段。

下面的红线是用户黑线的水平轴反射 enter image description here

这是代码和小提琴：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>

画布，2行同时路径

1 个答案: