第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

按住鼠標時在畫布上的鼠標位置連續(xù)繪制矩形

按住鼠標時在畫布上的鼠標位置連續(xù)繪制矩形

慕容708150 2023-08-05 20:42:05
我正在嘗試使用javascript和HTML畫布制作一個繪圖程序，我需要在鼠標所在的位置連續(xù)繪制一個圓圈，但我不太確定該怎么做。我有一個粗略的想法，但我的代碼（毫不奇怪）不起作用。知道我怎樣才能讓它發(fā)揮作用嗎？代碼在這里。<canvas width = '450' height = '450' id = 'drawing'> </canvas><script>  var canvas = document.getElementById('drawing');  var ctx = canvas.getContext('2d')  var drawing = false  function startmoving(){ drawing = true;}  function stopmoving() { drawing = false;}  function draw() {    if (drawing == true){      ctx.fillstyle = 'black';      ctx.fillRect(event.clientX, event.clientY, 4, 4)    }    setInterval(drawing, 10);  }</script>
查看完整描述

1 回答

?
米琪卡哇伊

TA貢獻1998條經(jīng)驗 獲得超6個贊

您需要為畫布設置一個 mousedown/mouseup 和 mousemove 監(jiān)聽器，然后在鼠標按下時在坐標處創(chuàng)建并放置一個矩形，如果鼠標抬起則停止繪制。另外，clientX 和 clientY 用于頁面左上角的可見部分。pageX 和 pageY 位于頁面的左上角。因此，如果你使用 clientX 和 clientY 向下滾動，它將繪制在當前頁面的位置，使其看起來很奇怪。修復？使用 pageX 和 pageY（將 clientX 和 clientY 替換為 pageX 和 pageY）！


<!DOCTYPE html>

<html>


<body>

  <canvas width='450' height='450' id='drawing'> </canvas>

  <script>

    var canvas = document.getElementById('drawing');

    var drawing = false;

    //start the drawing if the mouse is down

    canvas.addEventListener('mousedown', () => {

      drawing = true;

    })

    //stop the drawing if the mouse is up

    canvas.addEventListener('mouseup', () => {

      drawing = false;

    });

    //add an event listener to the canvas for when the user moves the mouse over it and the mouse is down

    canvas.addEventListener('mousemove', (event) => {

      var ctx = canvas.getContext('2d');

      //if the drawing mode is true (if the mouse button is down)

      if (drawing == true) {

        //make a black rectangle

        ctx.fillstyle = 'black';

        //put the rectangle on the canvas at the coordinates of the mouse

        ctx.fillRect(event.clientX, event.clientY, 4, 4)

      }

    });

  </script>

</body>


</html>


查看完整回答
反對 回復 2023-08-05
  • 1 回答
  • 0 關(guān)注
  • 102 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號