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物件例項。
function add(a,b)
var p = {}; //定義乙個空物件。
add.call(p,3,4); //在這個方法呼叫的時候，this指向了p
console.log(p.result);
4.方法呼叫模式
function persion() ;
return ;
}var p = new persion();
p.show(); //在show方法中的this指向了p物件
var c = (1 + 3);//4
var d = (3);//3
var f = (function () );//function(){}
var g = (function () )();//11
var h = (function () ());//11
console.log(`c=$\nd=$\nf=$\ng=$\nh=$\n`);
/* output:
c=4d=3
f=function(){}
g=11
h=11
*/
var canvas=document.queryselector('.demo');
canvas.width=600;
canvas.height=600;
var ctx=canvas.getcontext('2d');
//(a,b,c,d)：a,b表示矩形左上角頂點位置；c,d表示矩形長和寬
// 繪製矩形邊框
ctx.linewidth=2;
ctx.strokestyle='red';
ctx.rect(100,100,200,200);//建立矩形（沒線）
ctx.stroke();
ctx.beginpath();
ctx.strokestyle='green';
ctx.strokerect(50,50,100,100);//建立矩形（線）
// 繪製填充矩形
ctx.fillstyle='yellow';
ctx.fillrect(250,250,100,100);
(function())();var canvas=document.queryselector('.demo');
canvas.width=600;
canvas.height=600;
var ctx=canvas.getcontext('2d');
//第一條線
// ctx.beginpath();沒有必要，預設上來就有乙個狀態，狀態裡面：當前狀態裡面的繪製樣式
ctx.linewidth=15;
ctx.strokestyle='red';
ctx.moveto(100,100);
ctx.lineto(300,100);
ctx.stroke();
// 第二條線
/* beginpath():
1.開乙個新路徑，開啟新狀態的描繪
2.新狀態可以繼承之前狀態的樣式，但是當前狀態設定的所以樣式，只能用於當前的狀態
*/ctx.beginpath();
ctx.strokestyle='green';
ctx.moveto(100,200);
ctx.lineto(300,200);
ctx.stroke();
1.繪製**紙
(function () ,,, ];
var canvas = document.getelementbyid('demo');
canvas.width = 600;
canvas.height = 600;
var ctx = canvas.getcontext('2d');
ctx.strokestyle='white';
var startangle=0;
for(var i=0;i3.繪圖餅狀圖的封裝函式
var canvas = document.getelementbyid('demo');
canvas.style.border = '1px solid red';
var ctx = canvas.getcontext('2d');
//封裝的一整個動畫函式
function animit(imgsrc, x, y, framenum, pw, ph)
var img = new image();
img.src = imgsrc;
img.onload = function ()
$('down').onclick = function ()
$('left').onclick = function ()
$('right').onclick = function ()
setinterval(function () , 100);}}
animit('./img/gameimgs/dmmoprator2.png', 100, 100, 4, 40, 65);
↑↓
←→
canvas學習筆記
1 canvas 元素a 元素有乙個叫做 getcontext 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能，通過簡單的測試getcontext 方法的存在，指令碼可以檢查程式設計支援性var canvas document.getelementbyid tutorial if canvas....
canvas學習筆記
canvas是html5中的新功能，它是一塊，在你開闢的空間內部用 畫圖。而建立畫布和畫圖是需要一些步驟的 canvas是布 context是各種筆 先看乙個簡單的 瀏覽器不支援canvas 每乙個我們要進行的canvas操作都必須有獲取畫布，和獲取畫布內容的操作。然後還有乙個問題就是，我們要預防老...
canvas學習筆記
畫布相當於乙個img標籤，可以在畫布上繪製內容。畫布預設是透明的，所以可以放在另乙個元素上面繪製內容，乙個頁面上可以有多個畫布元素 1.請輸入 繪製畫布的前提需要在頁面上建立乙個canvas元素，然後使用js獲取到這個canvas元素 2.繪製矩形的方法 這邊的x，y分別為矩形在畫布上的x，y位置 ...