<canvas> Billedbehandling - JavaScript

Tegn billeder fra filer på <canvas> med JavaScript drawImage()

Skalering af billede

Her tages en billedfil og indsættes på <canvas> i en anden størrelse end original billedet.

Original billede (300x360) :

Japaner

Skaleret billede på canvas (150x180) :

Browseren understøtter ikke <canvas>

Resultatet ovenfor er skabt af følgende kode

Udklip fra billede

Her tages et område fra et billede og indsættes på <canvas>.
Derefter indsættes en ramme med gennemsigtig midte på <canvas>.

2 originale billeder :

Japaner ramme

Udklip fra billede + ramme på canvas :

Browseren understøtter ikke <canvas>

Resultatet ovenfor er skabt af følgende kode

Negative farver

Her indsætte et billede på canvas, hvorefter farverne gøres negative.

Japaner Browseren understøtter ikke <canvas>

Resultatet ovenfor er skabt af følgende kode

Skift lysstyrke

Browseren understøtter ikke <canvas>

Resultatet ovenfor er skabt af følgende kode

Video på canvas

Samme funktion som bruges til at tegne et billede kan bruges til at tegne en video på canvas.

Så bruges setInterval() til at tegne igen og igen så videoen opdateres på canvas.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Næste side

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.