12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- let ctx = canvas.getContext('2d')
- ctx.beginPath();
- // 1,2: x и y от начала координат;
- // 3: радиус
- // 4,5: начало и конец отрисовки
- // 6: направление отрисовки
- ctx.arc(100, 100, 10, 0, 1.5 * Math.PI, false);
- // ctx.lineTo(50, 50) // зависит только от начальной точки канваса
- ctx.closePath()
- ctx.fillStyle = '#00FF00'
- ctx.fill()
- ctx.stroke();
- canvas.onclick = (e) => {
- // console.log(e)
- ctx.beginPath();
- ctx.arc(e.layerX, e.layerY, radiusInput.value ? radiusInput.value : 5, 0, 1.5 * Math.PI, false);
- ctx.closePath()
- ctx.fillStyle = colorInput.value
- ctx.fill()
- ctx.stroke();
- }
- function getRandomInt(min, max) {
- return Math.round(Math.random() * (max - min)) + min;
- }
- randomBtn.onclick = () => {
- let x = getRandomInt(0, 400)
- let y = getRandomInt(0, 400)
- let radius = getRandomInt(1, 50)
- let r = getRandomInt(0, 255)
- let g = getRandomInt(0, 255)
- let b = getRandomInt(0, 255)
- ctx.beginPath();
- ctx.arc(x, y, radius, 0, 1.5 * Math.PI, false);
- ctx.closePath()
- ctx.fillStyle = ` rgb(${r}, ${g}, ${b})`
- ctx.fill()
- ctx.stroke();
- }
- // for (let index = 0; index < 10000; index++) {
- // let x = getRandomInt(0, 400)
- // let y = getRandomInt(0, 400)
- // let radius = getRandomInt(1, 5)
- // let r = getRandomInt(0, 255)
- // let g = getRandomInt(0, 255)
- // let b = getRandomInt(0, 255)
- // ctx.beginPath();
- // ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- // ctx.closePath()
- // ctx.fillStyle = ` rgb(${r}, ${g}, ${b})`
- // ctx.fill()
- // ctx.stroke();
- // }
- // three.js babylon.js
|