課程
/前端開發(fā)
/Html5
/Canvas繪圖詳解
如題,測試了video,embed,object視頻好像都沒有效果出來!
2016-07-06
源自:Canvas繪圖詳解 5-3
正在回答
var?context?=?canvas.getContext('2d'); var?video?=?document.createElement('video'); video.src?=?'吔屎吧梁非凡_x264壓制.mp4'; video.preload?=?'preload'; video.autoplay?=?'autoplay'; video.height?=?context.canvas.height; video.width?=?context.canvas.width; setInterval(function??()?{ ????var?pattern?=?context.createPattern(video,?'no-repeat'); ????context.fillStyle?=?pattern; ????context.fillRect(0,?0,?context.canvas.width,?context.canvas.height); ????pattern?=?null; ????//drowStar...這里執(zhí)行其他繪畫步驟 },?100);
測試可用,setInterval的時(shí)間間隔盡量調(diào)大,不然電腦風(fēng)扇會狂飆...
樓上的方法應(yīng)該更高效吧 XD
var can = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('video');
video.addEventListener('play', function(){
????can.width = video.clientWidth;
????can.height = video.clientHeight;
????var ths = $(this);
????(function loop(){? ? ????
????????if(!ths.paused && !ths.ended){
????????????ctx.drawImage(ths, 0, 0);
????????????setTimeout(loop, 1000/30);
????????}
????})();????
}, false)
舉報(bào)
Canvas系列教程第二課,詳解Canvas各接口,讓同學(xué)徹底掌握Canvas繪圖
2 回答為什么我的星星沒有填充色呢
1 回答fill的時(shí)候外面半邊圓整個(gè)被填充了,怎么才能只填充月亮部分
4 回答createPattern 設(shè)置video填充 搞不起來?
1 回答代碼優(yōu)化部分加了scale填充的顏色就沒了?
2 回答視頻不能播放,解析失敗
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-10-20
測試可用,setInterval的時(shí)間間隔盡量調(diào)大,不然電腦風(fēng)扇會狂飆...
樓上的方法應(yīng)該更高效吧 XD
2016-07-09
var can = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('video');
video.addEventListener('play', function(){
????can.width = video.clientWidth;
????can.height = video.clientHeight;
????var ths = $(this);
????(function loop(){? ? ????
????????if(!ths.paused && !ths.ended){
????????????ctx.drawImage(ths, 0, 0);
????????????setTimeout(loop, 1000/30);
????????}
????})();????
}, false)