Canvas mouse drawing filling / stroke problem

CSDN Q & A 2021-12-30 05:48:30 阅读数:316

canvas mouse drawing filling stroke
Check the fill option , The final exported graphics are filled with + Stroked

The following is the front-end code

<label for="ColorFill"> Fill color </label> <input type="color" id="ColorFill"> <label for="ColorStroke"> Stroke / Line color </label> <input type="color" id="ColorStroke"> <select id="shape"> <option value="arc"> circular </option> <option value="line"> A straight line </option> <option value="ric"> rectangular </option> <option value="erase"> Eraser </option> </select> <select id="ty"> <option value="fill"> fill </option> <option value="stroke"> Stroke </option> </select> <label for="Cx" > Straight line thickness :</label> <input type="number" id="Cx" value="25" > <input type="button" value=" Empty " id="clear">

The following is the code for drawing a rectangle

case "ric": { ctx.beginPath(); if(ys == 'fill') { ctx.fillStyle=fillC; ctx.fillRect(x,y,endX-x,endY-y); } else(ys == 'stroke') { ctx.strokeStyle=strokeC; ctx.lineWidth=lineW; ctx.strokeRect(x,y,endX-x,endY-y); } ctx.closePath(); break; }
Operation results and error reporting contents

img

What I want to achieve

Just tracing is tracing Filled is filled

img




Refer to the answer 1:

Are the positions overlapped ,x, y




Refer to the answer 2:
版权声明:本文为[CSDN Q & A]所创,转载请带上原文链接,感谢。 https://primo.wiki/2021/12/202112300548285661.html