課程
/前端開發
/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...這里執行其他繪畫步驟 },?100);
測試可用,setInterval的時間間隔盡量調大,不然電腦風扇會狂飆...
樓上的方法應該更高效吧 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)
舉報
Canvas系列教程第二課,詳解Canvas各接口,讓同學徹底掌握Canvas繪圖
1 回答fill的時候外面半邊圓整個被填充了,怎么才能只填充月亮部分
2 回答為什么我的星星沒有填充色呢
4 回答createPattern 設置video填充 搞不起來?
1 回答代碼優化部分加了scale填充的顏色就沒了?
2 回答視頻不能播放,解析失敗
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-10-20
測試可用,setInterval的時間間隔盡量調大,不然電腦風扇會狂飆...
樓上的方法應該更高效吧 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)