如何在2D画布中添加矩形角点？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在2D画布中添加矩形角点？相关的知识，希望对你有一定的参考价值。
我在2D Canvas上工作，我想在矩形的每个角落添加这个角落角度（请参见图片），这个矩形大小不固定我可以通过拖动鼠标按钮来改变矩形大小，我已经做了灵活的矩形。请任何人帮助我，如何添加这些角落，它应该根据矩形大小灵活。
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); }
答案
认为您可能需要以下内容，
//================================================================
// 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>以上是关于如何在2D画布中添加矩形角点？的主要内容，如果未能解决你的问题，请参考以下文章