Canvas學習筆記2

var canvas = document.

queryselector
("#canvas");
var ctx = canvas.
getcontext
("2d");
//繪製影象
// ctx.drawimage(物件，x位置，y位置)
// ctx.drawimage(物件，x位置，y位置，寬度，高度)
// ctx.drawimage(物件，影象裁剪的位置x，影象的裁剪位置y，裁剪的寬度，裁剪的高度，x位置，y位置，寬度，高度)
//載入之後再繪製內容
img.
onload
=function()
img2.
onload
=function()

"canvas" width=

"800" height=
"600"
>
<
/canvas>
"800" height=
"" src=
"img/mov_bbb.mp4" controls=
"controls"
>
<
/video>
var video = document.
queryselector
("video"
)var canvas = document.
queryselector
("#canvas"
)var interid;
var ctx = canvas.
getcontext
('2d'
) video.
onplay
=function()
,16}// 間隔16是每秒鐘60幀的重新整理頻率，，1000毫秒除60幀約等於16
} video.
onpause
=function()
<
/script>

//引數 x位置,y位置，寬度，高度

var imgdata = ctx.
getimagedata(0
,0,10
,10)

putimagedata把影象資料放回畫布上

var imagedata2 = ctx2.

vreateimagedata(28
,28)for
(var i=
0;i)ctx2.
putimagedata
(imgdata2,0,
0,0,
0,28,
28)

canvas學習筆記2

基礎內容請看 十一.canvas中圓弧用弧度表示 1.弧度 半徑的長度為1弧度,圓一周為2 pi個弧度,一度為2 pi 360個弧度 十二.canvas繪製圓弧 1.ctx.arc x位置,y位置,半徑,開始弧度,結束弧度,方向布林值 方向預設順時針 十三.繪製 1.ctx.drawimage 物件...

canvas學習筆記

1 canvas 元素a 元素有乙個叫做 getcontext 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能，通過簡單的測試getcontext 方法的存在，指令碼可以檢查程式設計支援性var canvas document.getelementbyid tutorial if canvas....

canvas學習筆記

canvas是html5中的新功能，它是一塊，在你開闢的空間內部用 畫圖。而建立畫布和畫圖是需要一些步驟的 canvas是布 context是各種筆 先看乙個簡單的 瀏覽器不支援canvas 每乙個我們要進行的canvas操作都必須有獲取畫布，和獲取畫布內容的操作。然後還有乙個問題就是，我們要預防老...