0

Cart

Войти

Kolor linii: , grubość linii: , środkowym klawiszem myszy wyczyść obrazek z rysunku odręcznego

Współrzędne myszy:

Выше вы видите как работает графический редактор, а ниже вы видите как работает программный код

var c = document.querySelector("#mycanvas")  // uchwyt do canvasa
var g = c.getContext("2d")  // kontekst graficzny canvasa
var rysuj = false

c.addEventListener("mousemove",pisz)
c.addEventListener("mousedown",opuscPioro)
c.addEventListener("mouseup",function(){rysuj=false})

document.querySelector("#kolor").addEventListener("input",function() {
  g.strokeStyle = document.querySelector("#kolor").value
})

document.querySelector("#grubosc").addEventListener("input",function() {
  g.lineWidth = document.querySelector("#grubosc").value
})

rysunek()

function opuscPioro(event) {
  if (event.button==1) {  // button 1 -środkowy przycisk myszy
    g.clearRect(0,0,c.width,c.height)
    rysunek()
  }
  else {
    var x = event.pageX - c.offsetLeft
    var y = event.pageY - c.offsetTop
    g.beginPath()
    g.moveTo(x,y)
    rysuj = true
  }
}

function pisz(event) {
  var x = event.pageX - c.offsetLeft
  var y = event.pageY - c.offsetTop
   document.querySelector("#xy").innerHTML = x +", " + y
   if (rysuj) {
      g.lineTo(x,y)
      g.stroke()
   }
}

function rysunek() {
  var tlo = new Image()
  tlo.src = 'meadow.jpg'
  tlo.onload = function()
  {
    g.drawImage(tlo,0,0)
    g.fillStyle = "maroon"
    g.fillRect(100,400,100,70)  // wypełniony prostokąt x,y,szer,wys

    g.beginPath()
    g.moveTo(100,400)
    g.lineTo(200,400)
    g.lineTo(150,350)
    g.lineTo(100,400)
    g.stroke()

    g.fillStyle = "#FF0000"
    g.fill()

    g.beginPath()                 // pompon
    var n = 50
    var da = 2*Math.PI/n
    for (var i=0; i<n; i++) {
      g.moveTo(100,100)
      xk = 100 + 120*Math.cos(i*da)
      yk = 100 + 120*Math.sin(i*da)
      g.lineTo(xk,yk)
    }
    g.lineWidth = 2
    g.strokeStyle = "yellow"
    g.stroke()

    g.beginPath()            // koło
    g.arc(100,100,30,0,2*Math.PI)
    g.fillStyle = "orange"
    g.fill()
  }



}

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #mycanvas {border: 1px dotted gray; background: lightgray}
  </style>
  </head>
  <body>
    <p>
     Kolor linii: <input type="color" id="kolor" value="#FFFF00">,
     grubość linii: <input type="range" id="grubosc" value="2" min="1" max="20">,
	 środkowym klawiszem myszy wyczyść obrazek z rysunku odręcznego
    </p>
    <canvas width="1000" height="500" id="mycanvas"></canvas>
    <p>
      Współrzędne myszy: <span id="xy"> </span>
    </p>


    <script>var c = document.querySelector("#mycanvas")  // uchwyt do canvasa
var g = c.getContext("2d")  // kontekst graficzny canvasa
var rysuj = false

c.addEventListener("mousemove",pisz)
c.addEventListener("mousedown",opuscPioro)
c.addEventListener("mouseup",function(){rysuj=false})

document.querySelector("#kolor").addEventListener("input",function() {
  g.strokeStyle = document.querySelector("#kolor").value
})

document.querySelector("#grubosc").addEventListener("input",function() {
  g.lineWidth = document.querySelector("#grubosc").value
})

rysunek()

function opuscPioro(event) {
  if (event.button==1) {  // button 1 -środkowy przycisk myszy
    g.clearRect(0,0,c.width,c.height)
    rysunek()
  }
  else {
    var x = event.pageX - c.offsetLeft
    var y = event.pageY - c.offsetTop
    g.beginPath()
    g.moveTo(x,y)
    rysuj = true
  }
}

function pisz(event) {
  var x = event.pageX - c.offsetLeft
  var y = event.pageY - c.offsetTop
   document.querySelector("#xy").innerHTML = x +", " + y
   if (rysuj) {
      g.lineTo(x,y)
      g.stroke()
   }
}

function rysunek() {
  var tlo = new Image()
  tlo.src = 'https://progi.online/wp-content/uploads/2022/05/dandelion-meadow.jpg'
  tlo.onload = function()
  {
    g.drawImage(tlo,0,0)
    g.fillStyle = "maroon"
    g.fillRect(100,400,100,70)  // wypełniony prostokąt x,y,szer,wys

    g.beginPath()
    g.moveTo(100,400)
    g.lineTo(200,400)
    g.lineTo(150,350)
    g.lineTo(100,400)
    g.stroke()

    g.fillStyle = "#FF0000"
    g.fill()

    g.beginPath()                 // pompon
    var n = 50
    var da = 2*Math.PI/n
    for (var i=0; i<n; i++) {
      g.moveTo(100,100)
      xk = 100 + 120*Math.cos(i*da)
      yk = 100 + 120*Math.sin(i*da)
      g.lineTo(xk,yk)
    }
    g.lineWidth = 2
    g.strokeStyle = "yellow"
    g.stroke()

    g.beginPath()            // koło
    g.arc(100,100,30,0,2*Math.PI)
    g.fillStyle = "orange"
    g.fill()
  }



}</script>
  </body>
</html>