Question

当我减小rect的大小时，我该如何调整它的大小（如绘画或其他工具）？

清除矩形的最佳方法是什么？

当开始再次绘制第一个“clearRect”撤消时！

我正在使用JQuery和HTML5 Canvas。

<canvas id="quadro" width="500" height="500"></canvas>

 $(document).ready(function(){  
        var canvas = document.getElementById("quadro");
        var ctx = canvas.getContext("2d");
        var iniX=0;
        var iniY=0;
        var finalX=0;
        var finalY=0;
        $("#quadro").mouseover(function(){
            function rectangle(){
                ctx.rect(iniX,iniY,finalX,finalY);
                ctx.stroke();
                if(finalX >iniX){
                    ctx.clearRect(iniX+1,iniY,finalX-1,finalY);
                }else{
                    ctx.clearRect(iniX,iniY,finalX+1,finalY);

                }
            }
            $('#quadro').mousedown(function(evt){
                iniX = evt.pageX - $("#quadro").offset().left;
                iniY = evt.pageY - $("#quadro").offset().top;
            }); 
            $('#quadro').mousemove(function(evt){
                finalX = evt.pageX - $("#quadro").offset().left - iniX;
                finalY = evt.pageY - $("#quadro").offset().top - iniY;
                $("#pos").text("X: "+finalX+" Y: "+finalY);

                if(iniX != 0 && iniY != 0){
                    rectangle(finalX,finalY);
                }
            });
            $("#quadro").mouseup(function(e){
                iniX = 0;
                iniY = 0;
            });
        });
    });

Answer 1

以下是一些可以让您绘制和重绘多个矩形的修改。

＆＃13;

$(document).ready(function(){  
        var canvas = document.getElementById("quadro");
        var ctx = canvas.getContext("2d");
        var iniX=0;
        var iniY=0;
        var finalX=0;
        var finalY=0;
     	var w = canvas.width;
     	var h = canvas.height;
     	var imageData = ctx.getImageData(0,0,w,h);
    
        $("#quadro").mouseover(function(){
            function rectangle(){
                // DRAW THE PRIOR IMAGE
                ctx.putImageData(imageData,0,0);
                // BEGIN A NEW PATH (so we don't stroke many rects)
                ctx.beginPath();
                ctx.rect(iniX,iniY,finalX,finalY);
                ctx.strokeStyle="rgba(20,150,180,50)";
                ctx.fillStyle="rgba(50,150,250,.25)"
                ctx.stroke();
                ctx.fillRect(iniX,iniY,finalX,finalY);
            }
            $('#quadro').mousedown(function(evt){
                // CAPTURE THE CURRENT IMAGE
                imageData = ctx.getImageData(0,0,w,h);
                iniX = evt.pageX - $("#quadro").offset().left;
                iniY = evt.pageY - $("#quadro").offset().top;
            }); 
            $('#quadro').mousemove(function(evt){
                finalX = evt.pageX - $("#quadro").offset().left - iniX;
                finalY = evt.pageY - $("#quadro").offset().top - iniY;
                $("#pos").text("X: "+finalX+" Y: "+finalY);

                if(iniX != 0 && iniY != 0){
                    rectangle(finalX,finalY);
                }
            });
            $("#quadro").mouseup(function(e){
                iniX = 0;
                iniY = 0;
            });
        });
    });

＆＃13;

body {
  background-color: #99CCFF;
}
#quadro {
  border:1px solid black;
  background-color:white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="quadro" width="500" height="500"></canvas>

＆＃13;

有没有办法在HTML5画布中制作一个“干净”可调整大小的笔画？

1 个答案: