Szukaj…
Jak dodać element Canvas HTML5 do strony internetowej
HTML5-Canvas ...
- Jest elementem HTML5.
- Jest obsługiwany w większości nowoczesnych przeglądarek (Internet Explorer 9+).
- Jest widocznym elementem, który jest domyślnie przezroczysty
- Ma domyślną szerokość 300 pikseli i domyślną wysokość 150 pikseli.
- Wymaga JavaScript, ponieważ cała treść musi być programowo dodana do kanwy.
Przykład: Utwórz element HTML5-Canvas, używając zarówno znaczników HTML5, jak i JavaScript:
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvasHtml5{border:1px solid red; }
#canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){
// add a canvas element using javascript
var canvas=document.createElement('canvas');
canvas.id='canvasJavascript'
document.body.appendChild(canvas);
}); // end $(function(){});
</script>
</head>
<body>
<!-- add a canvas element using html -->
<canvas id='canvasHtml5'></canvas>
</body>
</html>
Rozmiar i rozdzielczość płótna
Rozmiar płótna to obszar, który zajmuje on na stronie i jest zdefiniowany przez właściwości szerokości i wysokości CSS.
canvas {
width : 1000px;
height : 1000px;
}
Rozdzielczość obszaru roboczego określa liczbę zawartych w nim pikseli. Rozdzielczość ustawia się, ustawiając właściwości szerokości i wysokości elementu obszaru roboczego. Jeśli nie zostanie określony, płótno ma domyślnie wartość 300 na 150 pikseli.
Następujące płótno będzie używać powyższego rozmiaru CSS, ale ponieważ width i height nie zostaną określone, rozdzielczość będzie wynosić 300 na 150.
<canvas id="my-canvas"></canvas>
Spowoduje to nierównomierne rozciągnięcie każdego piksela. Współczynnik pikseli wynosi 1: 2. Po rozciągnięciu obszaru roboczego przeglądarka zastosuje filtrowanie dwuliniowe. Powoduje to rozmycie rozciągniętych pikseli.
Aby uzyskać najlepsze wyniki podczas korzystania z obszaru roboczego, upewnij się, że rozdzielczość obszaru roboczego odpowiada rozmiarowi ekranu.
Zgodnie z powyższym stylem CSS, aby dopasować rozmiar wyświetlacza, dodaj płótno o width i height ustawionej na tę samą liczbę pikseli, jaką określa styl.
<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>
Płótno poza ekranem
Wiele razy, pracując z płótnem, będziesz musiał mieć płótno, aby pomieścić niektóre wewnętrzne dane pikseli. Łatwo jest stworzyć płótno poza ekranem, uzyskać kontekst 2D. Płótno poza ekranem będzie również wykorzystywać dostępny sprzęt graficzny do renderowania.
Poniższy kod po prostu tworzy płótno i wypełnia je niebieskimi pikselami.
function createCanvas(width, height){
var canvas = document.createElement("canvas"); // create a canvas element
canvas.width = width;
canvas.height = height;
return canvas;
}
var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);
Wiele razy płótno poza ekranem będzie używane do wielu zadań i możesz mieć wiele płócien. Aby uprościć korzystanie z płótna, możesz dołączyć kontekst płótna do płótna.
function createCanvasCTX(width, height){
var canvas = document.createElement("canvas"); // create a canvas element
canvas.width = width;
canvas.height = height;
canvas.ctx = canvas.getContext("2d");
return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);
Wykrywanie położenia myszy na kanwie
Ten przykład pokaże, jak uzyskać pozycję myszy względem obszaru roboczego, tak aby (0,0) było lewym górnym rogiem obszaru roboczego HTML5. e.clientX i e.clientY otrzymają pozycje myszy względem góry dokumentu, aby zmienić to ustawienie w oparciu o górę obszaru roboczego, odejmujemy left i right pozycję obszaru roboczego od klienta X i Y.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";
canvas.addEventListener("mousemove", function(e) {
var cRect = canvas.getBoundingClientRect(); // Gets CSS pos, and width/height
var canvasX = Math.round(e.clientX - cRect.left); // Subtract the 'left' of the canvas
var canvasY = Math.round(e.clientY - cRect.top); // from the X/Y positions to make
ctx.clearRect(0, 0, canvas.width, canvas.height); // (0,0) the top left of the canvas
ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});
Zastosowanie Math.round ma zapewnić, że pozycje x,y są liczbami całkowitymi, ponieważ prostokąt obwiedni obszaru roboczego może nie mieć pozycji liczb całkowitych.
Witaj świecie
HTML
<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);
Wynik
Indeks Html5 Canvas Możliwości i zastosowania
Możliwości płótna
Canvas pozwala programowo rysować na swojej stronie:
- Obrazy ,
- Teksty ,
- Linie i krzywe .
Rysunki na płótnie mogą być szeroko stylizowane:
- szerokość skoku ,
- kolor obrysu ,
- kolor wypełnienia kształtu ,
- nieprzezroczystość
- zacienianie ,
- gradienty liniowe i gradienty promieniowe ,
- twarz czcionki ,
- rozmiar czcionki ,
- wyrównanie tekstu ,
- tekst może być obrysowany, wypełniony lub obrysowany i wypełniony ,
- zmiana rozmiaru obrazu ,
- kadrowanie obrazu ,
- komponowanie
Zastosowania płótna
Rysunki można łączyć i umieszczać w dowolnym miejscu na płótnie, dzięki czemu można tworzyć:
- Aplikacje do malowania / szkicowania,
- Szybkie gry interaktywne,
- Analizy danych, takie jak wykresy, wykresy,
- Obrazowanie podobne do Photoshopa,
- Reklamy typu Flash i Flashy treści internetowe.
Płótno pozwala manipulować kolorami składowymi obrazów: czerwonym, zielonym, niebieskim i alfa. Dzięki temu kanwa może manipulować obrazami z wynikami podobnymi do Photoshopa.
- Ponownie pokoloruj dowolną część obrazu na poziomie pikseli (jeśli używasz HSL, możesz nawet pokolorować obraz, zachowując ważne oświetlenie i nasycenie, aby wynik nie wyglądał, jakby ktoś uderzył go farbą)
- „Nokaut” tła wokół osoby / przedmiotu na obrazie,
- Wykryj i wypełnij część obrazu (np. Zmień kolor płatka kwiatu klikniętego przez użytkownika z zielonego na żółty - tylko płatek kliknięty!),
- Wykonuj wypaczanie perspektywy (np. Zawiń obraz wokół krzywej kubka),
- Sprawdź obraz pod kątem zawartości (np. Rozpoznawanie twarzy),
- Odpowiedz na pytania dotyczące obrazu: Czy na tym zdjęciu mojego miejsca parkingowego jest zaparkowany samochód ?,
- Zastosuj standardowe filtry obrazu (skala szarości, sepia itp.)
- Zastosuj dowolny egzotyczny filtr obrazu, jaki możesz wymarzyć (Sobel Edge Detection),
- Łącz obrazy. Jeśli droga babcia Sue nie mogła dostać się na zjazd rodzinny, po prostu „photoshop” ją w obraz zjazdu. Nie lubię kuzyna Phila - po prostu „wypróbuj go w Photoshopie,
- Odtwórz wideo / Chwyć klatkę z filmu,
- Wyeksportuj zawartość płótna jako .jpg | .png obraz (możesz nawet opcjonalnie przyciąć lub opatrzyć adnotacjami obraz i wyeksportować wynik jako nowy obraz),
Informacje o przenoszeniu i edytowaniu rysunków na płótnie (na przykład w celu stworzenia gry akcji):
- Po narysowaniu czegoś na płótnie tego istniejącego rysunku nie można przenieść ani edytować. Warto wyjaśnić to powszechne błędne przekonanie, że rysunki na płótnie są ruchome: istniejących rysunków na płótnie nie można edytować ani przenosić!
- Płótno rysuje się bardzo, bardzo szybko. Płótno może narysować setki obrazów, tekstów, linii i krzywych w ułamku sekundy. Używa GPU, gdy jest dostępny, aby przyspieszyć rysowanie.
- Płótno tworzy iluzję ruchu, szybko i wielokrotnie rysując coś, a następnie przerysowując go w nowej pozycji. Podobnie jak telewizja, ciągłe przerysowanie daje oku iluzję ruchu.
Obracać się
Metoda rotate(r) kontekstu 2D obraca płótno o określoną liczbę r radianów wokół początku.
HTML
<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<button type="button" onclick="rotate_ctx();">Rotate context</button>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);
rotate_ctx = function() {
// translate so that the origin is now (ox, oy) the center of the canvas
ctx.translate(ox, oy);
// convert degrees to radians with radians = (Math.PI/180)*degrees.
ctx.rotate((Math.PI / 180) * 15);
ctx.fillText("Hello World", 0, 0);
// translate back
ctx.translate(-ox, -oy);
};
Zapisz płótno do pliku obrazu
Możesz zapisać płótno do pliku obrazu, używając metody canvas.toDataURL() , która zwraca identyfikator URI danych dla danych obrazu płótna.
Metoda może przyjąć dwa opcjonalne parametry canvas.toDataURL(type, encoderOptions) : type to format obrazu (jeśli pominięty, domyślnie jest to image/png ); encoderOptions to liczba od 0 do 1 wskazująca jakość obrazu (domyślnie 0,92).
Tutaj rysujemy płótno i dołączamy identyfikator URI płótna do linku „Pobierz na myImage.jpg”.
HTML
<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);
download_img = function(el) {
// get image URI from canvas object
var imageURI = canvas.toDataURL("image/jpg");
el.href = imageURI;
};