2Dキャンバスで矩形の角を追加するには？

Question

私はすでに、私は2Dキャンバスに取り組んでいると私は、長方形の各コーナーでは、このコーナーの角度を追加したい（画像を参照してください）と、この矩形サイズは、私は、マウスのボタンをドラッグして四角形のサイズを変更することができ、固定されていない

フレキシブルな長方形でした。誰でも助けてくれますか、それらのコーナーを追加するにはどのように長方形のサイズに応じて柔軟にする必要があります。

function draw() { 
     ctx.fillStyle = "#6E97B1"; 
     width += deltaMove.x; 
     height += deltaMove.y; 
     var CrosshairSize = 6; 
     ctx.strokeStyle = '#00BEFE'; 
     ctx.globalAlpha = 0.3; 
     ctx.lineWidth = 1; 
     ctx.fillRect(startposition.x, startposition.y, width, height); 
     ctx.strokeRect(startposition.x + (1 + width/2), startposition.y + (height/2) - (CrosshairSize/2), 1, CrosshairSize); 
     ctx.strokeRect(startposition.x + (1 + width/2) - (CrosshairSize/2), startposition.y + (height/2), CrosshairSize, 1); } 

Answer 1

は、あなたがそれを必要とする場合、低品質のJPEGアーティファクトは、コードの3つの余分な行を取るとなっ...以下、

//================================================================ 
 
// The drawBox function 
 
// Arguments 
 
// x,y : top left of the box 
 
// w,h : width and height. If you have a coordinate the width and height 
 
//  can be calculated mouseX - x, mouseY - y where x, and y are the 
 
//  top left of the box. 
 
// crosshairSize : for one arm. Total size is crosshairSize * 2 + detailWidth 
 
// detailWidth : of detail 
 
// fill : background of rect fill colour 
 
// detailCol : colour 
 
function drawBox(x, y, w, h, crosshairSize, detailWidth, fill, detailCol) { 
 
     function drawCross(x,y,s,w){ // draw crosshair s is size, w is width 
 
      const hw = w/2; // half width 
 
      ctx.beginPath(); 
 
      ctx.lineTo(x - hw, y - hw); 
 
      ctx.lineTo(x - hw, y - s); 
 
      ctx.lineTo(x + hw, y - s); 
 
      ctx.lineTo(x + hw, y - hw); 
 
      ctx.lineTo(x + s, y - hw); 
 
      ctx.lineTo(x + s, y + hw); 
 
      ctx.lineTo(x + hw, y + hw); 
 
      ctx.lineTo(x + hw, y + s); 
 
      ctx.lineTo(x - hw, y + s); 
 
      ctx.lineTo(x - hw, y + hw); 
 
      ctx.lineTo(x - s, y + hw); 
 
      ctx.lineTo(x - s, y - hw); 
 
      ctx.closePath(); 
 
      ctx.fill() 
 
     } 
 
     function drawCorner(x,y,dx,dy,s,w){ // draw crosshair s is size, w is width 
 
              // dx and dy are directions   
 
      const hw = w/2; // half width 
 
      ctx.beginPath(); 
 
      ctx.lineTo(x,y); 
 
      ctx.lineTo(x + dx * s, y); 
 
      ctx.lineTo(x + dx * s, y + dy * w); 
 
      ctx.lineTo(x + dx * w, y + dy * w); 
 
      ctx.lineTo(x + dx * w, y + dy * s); 
 
      ctx.lineTo(x , y + dy * s); 
 
      ctx.closePath(); 
 
      ctx.fill(); 
 
     } 
 
     ctx.fillStyle = fill; 
 
     ctx.fillRect(x,y,w,h); 
 
     ctx.fillStyle = detailCol; 
 
     drawCross(x + w/2, y + h/2,crosshairSize,detailWidth); 
 
     drawCorner(x , y ,1, 1, crosshairSize * 2 ,detailWidth); 
 
     drawCorner(x + w , y ,-1, 1, crosshairSize * 2 ,detailWidth); 
 
     drawCorner(x + w, y + h ,-1, -1, crosshairSize * 2 ,detailWidth); 
 
     drawCorner(x , y + h,1, -1, crosshairSize * 2 ,detailWidth); 
 
     
 
} 
 

 
// end of function 
 
// =========================================== 
 

 

 

 

 

 

 

 
// rest of code is just to animate 
 
const ctx = canvas.getContext("2d"); 
 

 
function mainLoop(time){ 
 
    ctx.clearRect(0,0,300,150); 
 
    var w = Math.abs(Math.sin(time/10000) * 110) + 20; 
 
    var h = Math.abs(Math.sin(time/3791) * 45) + 20 ; 
 

 

 
    // Calling the drawBox function 
 
    drawBox(150-w,75-h,w*2,h* 2,8,4,"#6E97B1",'#00BEFE'); 
 

 

 

 
    requestAnimationFrame(mainLoop); 
 

 
} 
 
requestAnimationFrame(mainLoop); 
 

 

 

 
// Code monkey pay 2 peanuts and a banana please.

<canvas id = "canvas"></canvas>

ような何かをしたいかもしれないと思います。 ：P