Last active
November 19, 2025 13:41
-
-
Save punkyoon/f03b96cb249a32ac5e04100c5e228a3e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #canvas-wrapper { | |
| background: #d3d3d3; | |
| height: 500px; | |
| width: 300px; | |
| } | |
| h1 { | |
| margin: 10px 0; | |
| } | |
| video { | |
| height: 300px; | |
| width: 500px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="stylesheet" href="index.css" /> | |
| </head> | |
| <body> | |
| <h1>Video</h1> | |
| <video autoload autoplay crossorigin="anonymous" id="video" loop muted src="vid.mp4" preload="auto"></video> | |
| <hr /> | |
| <h1>Image</h1> | |
| <img crossorigin="anonymous" id="image" src="img.jpg" /> | |
| <hr /> | |
| <h1>Canvas</h1> | |
| <div id="canvas-wrapper"></div> | |
| <button onclick="drawVideo()">Draw Video</button> | |
| <button onclick="drawImage()">Draw Image</button> | |
| <script src="libs/pixis.min.js"></script> | |
| <script crossorigin="anonymous" type="application/javascript" src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const video = document.getElementById("video"); | |
| const image = document.getElementById("image"); | |
| const canvasWrapper = document.getElementById("canvas-wrapper"); | |
| function drawVideo() { | |
| const canvas = new PIXI.Application({ width: 300, height: 500, transparent: false }); | |
| const videoTexture = PIXI.Texture.from(video.src); | |
| const videoSprite = new PIXI.Sprite(videoTexture); | |
| videoSprite.width = canvas.screen.height; | |
| videoSprite.height = canvas.screen.width; | |
| videoSprite.anchor.y = 1; | |
| videoSprite.rotation = 1.57; // Why... why...why...........why........ (rotate 90deg) | |
| canvas.stage.addChild(videoSprite); | |
| canvasWrapper.appendChild(canvas.view); | |
| } | |
| function drawImage() { | |
| const canvas = new PIXI.Application({ width: 300, height: 500, transparent: false }); | |
| const imageTexture = PIXI.Texture.from(image.src); | |
| const imageSprite = new PIXI.Sprite(imageTexture); | |
| imageSprite.width = canvas.screen.height; | |
| imageSprite.height = canvas.screen.width; | |
| imageSprite.anchor.y = 1; | |
| imageSprite.rotation = 1.57; // Why... why...why...........why........ (rotate 90deg) | |
| canvas.stage.addChild(imageSprite); | |
| canvasWrapper.appendChild(canvas.view); | |
| } |
Author
Author
참 잘되고 좋기는 한데...
pixis같은 wrapper가 없으면 다루기가 너무 까다롭고..
pixis를 사용하자니, 원하는 결과물을 얻을 수 있도록 잘 조절할 수 있을지 불명확
Author
real dirty and not useful code implementing drawImage is here
i just want to render 2d images, but i don't know why do i have to use shader and other difficult things. also, there are only dirty and useless examples
Author
install serve and serve these files (simple way 😈 )
It would be nice to use this:
*{margin:0px; padding:0px}for opera.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
directory structure
img.jpgandvid.mp4)