1

我想画一条线，同时画一条线，同时画出水平反射的线。所以用户正在做 2 笔画。问题是画布只有一个上下文对象，不能被两个单独的 lineTo 命令使用。我该如何解决这个问题，或者这需要一个动画帧吗？

这里是一行代码：

[链接] 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 回答