canvas學習筆記

畫布相當於乙個img標籤，可以在畫布上繪製內容。畫布預設是透明的，所以可以放在另乙個元素上面繪製內容，乙個頁面上可以有多個畫布元素

1.請輸入**繪製畫布的前提需要在頁面上建立乙個canvas元素，然後使用js獲取到這個canvas元素

這邊的x，y分別為矩形在畫布上的x，y位置 width，height表示矩形的寬和高

//繪製填充的矩形

context.fillrect(x,y,width,height);
//繪製乙個矩形的邊框
context.strokerect(x,y,width,height);
//清除指定矩形區域，讓清除部分完全透明
context.clearrect(x,y,width,height);

context.fillstyle='lightblue';

3.繪製路徑的方法

//開始繪製路徑

context.beginpath();
//填充路徑的內容區域形成實心圖形 使用這個方法沒有閉合的形狀會自動閉合
context.fill();

執行了lineto方法下次的起點位置會變為當前這個位置

context.moveto(10,10);

context.lineto(150,50);
context.lineto(0,50);
context.lineto(10,10);
//樣式
context.strokestyle='blue';
//線寬
context.linewidth='10px';
context.stroke();

下面是繪製多邊形的例子

context.beginpath();

context.moveto(10,10);
context.lineto(150,50);
context.lineto(0,50);
context.lineto(10,10);
context.stroke();
context.fill();

canvas學習筆記

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

canvas學習筆記

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

canvas學習筆記

1.函式呼叫模式 function add a,b add 3,9 此方法執行的時候，this指向了window console.log result 2.構造器呼叫模式 function persion var p new persion p.show 在show方法中方法this，指向了p物件例...