Canvas學習之基礎一

this.test1 = document.getelementbyid('test1');

this.test1.width = 1024; // 必須如此設定寬高
this.test1.height = 900;
let ctx1;
if (this.test1.getcontext('2d')) else 
ctx1.beginpath(); // 清除之前的路徑
ctx1.moveto(100,200); // 起始點
ctx1.lineto(200,300); // 移動端點
ctx1.lineto(200,200); // 移動端點
ctx1.fillstyle='red'; // 填充樣式
ctx1.fill(); // 執行填充
ctx1.pathclose(); // 使路徑封閉
ctx1.strokestyle='black'
// 線條樣式
ctx1.strokewidth=3; // 線條寬度
ctx1.stroke(); // 執行畫線

this.test2 = document.getelementbyid('test2');

this.test2.width = 1024; // 必須如此設定寬高
this.test2.height = 900;
let ctx2;
if (this.test2.getcontext('2d')) else 
= 'orange';
for (let i=1; i<= 10; i++) 
ctx2.fillstyle = 'orange';
for (let i=1; i<= 10; i++)

Canvas學習筆記 一 基礎知識

1 元素id 不是元素專享，和標準的html標籤一樣，都可以為元素指定id width 元素寬度，預設為300px。可以通過dom和css進行設定 height 元素高度，預設為150px。可以通過dom和css進行設定 注 使用css設定width和height時，渲染影象會縮放適應布局，這意味著...

Canvas學習系列一 初識canvas

最近你開始在學習canvas，打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來，如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現，可以說開啟的web世界繪製動畫，圖形的大門，其功能非常強大 canvas 元素是html5中功能最強大的元素，它的能力主要...

Canvas學習系列一 初識canvas

最近你開始在學習canvas，打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來，如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現，可以說開啟的web世界繪製動畫，圖形的大門，其功能非常強大 canvas 元素是html5中功能最強大的元素，它的能力主要...