Menu
Opis
Wzorek (pattern) w
canvas
Kliknij na przycisk "Pokaż".
Pattern może być z obrazka albo z innego canvas.
Ustawienie płótna do rysowania canvas na pełnym oknie
Stworzenie wzorka na innym płótnie, w tle, nie dodając go na ekran
Utworzenie w naszym płótnie canvas pattern wzorka
Rysunek koła grubą linią ze wzorkiem ustawionym w strokeStyle
Kod
👀
<style> html, body {margin: 0; height: 100%;} body {overflow: hidden; height: inherit;} </style> <body> <canvas></canvas> <script> //----1--- USTAWIENIE canvas --------------- const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight; //--2-- Stworzenie canvas-pattern, offscreen -- const patternCanvas = document.createElement('canvas'); const patternContext = patternCanvas.getContext('2d'); patternCanvas.width = 50; patternCanvas.height = 50; patternContext.fillStyle = '#fec'; patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height); patternContext.arc(0, 0, 50, 0, .5 * Math.PI); patternContext.stroke(); //---3--- Utworzenie w canvas pattern wzorka const pattern = ctx.createPattern(patternCanvas, 'repeat'); //---4--- RYSOWANIE KOŁA ze stylem pattern -- function drawBall() { ctx.lineWidth=15; ctx.strokeStyle = pattern; //przypisanie pattern ctx.beginPath(); ctx.arc(200, 200, 100, 0, Math.PI*2); ctx.stroke(); ctx.closePath(); } drawBall(); </script> </body>
Podgląd:
📂