如何使用html-canvas標籤繪製視頻？

我想知道如何使用Javascript和畫布「繪製」圖像（下面顯示的示例）？「繪製」，意思是圖像將隨着鼠標移動，並且每次鼠標改變位置時重複放置自己。如何使用html-canvas標籤繪製視頻？

編輯：好的，所以縮小我的問題。基本上，我想知道如何使用畫布標籤「繪製」圖像？我將如何「畫」與視頻對象？

來源

2015-11-05 ooohfff

_「」畫「在這個意義上，圖像會跟隨鼠標，反覆每鼠標改變位置時將自身。」 _不斷追加新的圖像記錄，或單圖像跟隨光標？ – guest271314

看上面的草圖，這是我想要實現的，我會說它不斷創建一個新的圖像對象（儘管它必須是相同的圖像），然後放置它。 – ooohfff

當我提到遊標時，我的意思是它將被放置在遊標的位置。 – ooohfff

這是相當直截了當：

加載圖像
讓您的鼠標COORDS
這些COORDS繪製圖像
使用CSS定位的元素

重點是不清除你的畫布。

canvas.onmousemove = draw; 
 
var ctx = canvas.getContext('2d'); 
 
var img = new Image; 
 
img.src = 'http://lorempixel.com/50/50?'+Math.random(); 
 
function draw(e){ 
 
    var rect = canvas.getBoundingClientRect(); 
 
    var x = e.clientX-rect.left-img.width/2; 
 
    var y = e.clientY-rect.top-img.height/2; 
 
    ctx.drawImage(img, x, y, img.width, img.height); 
 
    }

canvas{position: absolute; z-index:1;} 
 
#up{z-index:2; background-color:rgba(125,0,125,.5);} 
 
p{position: relative; background-color:rgba(0,125,125,.5); color:#ccc}

<canvas id="canvas" width=500 height=500></canvas> 
 
<p id="up">There is something behind me</p> 
 
<p id="down">There is something above me</p>

來源

2015-11-05 18:02:53 Kaiido

如何使用html-canvas標籤繪製視頻？

回答

相關問題