老師，如何用兩個點畫這種圖形
老師，我想通過A坐標和B坐標，再一個寬度的矩形用canvas應(yīng)該怎么繪制
Kerry251150
2020-09-04
1 回答
舉報
0/150
提交
取消
2020-12-14
<body>??<canvas?id="canvas"?width="800"?height="800"></canvas>??<div?style="margin-top:?10px;">????aX:?<input?id="aX"?type="text"?value="100">????aY:?<input?id="aY"?type="text"?value="100">????<br>????bX:?<input?id="bX"?type="text"?value="300">????bY:?<input?id="bY"?type="text"?value="300">????<br>????width:?<input?id="width"?type="text"?value="200">????<button?onclick="drawRect()">創(chuàng)建矩形</button>??</div>??<script>????const?canvas?=?document.getElementById('canvas');????const?cxt?=?canvas.getContext('2d');????window.onload?=?function()?{??????drawRect();????}????function?drawRect()?{??????let?aX?=?document.getElementById('aX').value;??????let?aY?=?document.getElementById('aY').value;??????let?bX?=?document.getElementById('bX').value;??????let?bY?=?document.getElementById('bY').value;??????let?width?=?document.getElementById('width').value;??????let?noValue?=?!aX?||?!aY?||?!bX?||?!bY?||?!width;??????if(noValue)?{????????alert('請把數(shù)據(jù)填全！');????????return;??????}??????//?畫矩形??????cxt.clearRect(0,?0,?canvas.width,?canvas.height);??????cxt.beginPath();??????cxt.moveTo(aX,?aY);??????cxt.lineTo(bX,?bY);??????cxt.lineWidth?=?width;??????cxt.stroke();????}??</script></body>我自己寫了一個，不知道是不是你想要的效果