графический редактор
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>
Перейти к содержимому