建立第乙個屬於自己的canvas小遊戲(基礎知識)

2021-09-01 23:48:52 字數 1241 閱讀 5467

canvas元素用於圖形的繪製,通過指令碼(js)來完成。canvas元素用於圖形的繪製,通過指令碼(js)來完成。

1. ctx.fillstyle=「#eee」;

2. ctx.fillrect(x座標,y座標,寬度值,高度值);

1. ctx.strokestyle=」#eee」;

2. ctx. strokerect(x座標,y座標,寬度值,高度值);

1. ctx .beginpath();

2. ctx.arc(x座標,y座標,半徑,起始角度,結束角度2*math.pi);

3. ctx.closepath();

4. ctx.fillstyle=「#eee」;

5. ctx.fill();

1.ctx.beginpath();

2.ctx.arc(x座標,y座標,半徑,起始角度,結束角度2*math.pi);

3.ctx.stroke();

1.moveto(x,y) 定義線條開始座標,

2.lineto(x,y) 定義線條結束座標,

3.用stroke()來繪製線條

1. ctx.font屬性定義字型

2. ctx .filltext(文字,x 座標,y 座標).實心的文字

3. ctx .filltext(文字,x 座標,y 座標).空心的文字

ctx.createlineargradient(起始位置的x座標,起始位置的y座標,漸變終點位置x1座標, 漸變終點位置y1座標)

ctx.createradialgradient(漸變的開始圓的x座標, 漸變的開始圓的y座標,開始圓的半徑,漸變的結束圓的x座標, 漸變的結束圓的     y座標,結束圓的半徑)

addcolorstop()方法指定顏色停止,引數使用座標來描述,可以是0或1

使用漸變,設定fillstyle或strokestyle的值為漸變,然後繪製

//建立漸變

var grd=ctx.createradialgradient(75,5,0,5,90,60,100);

grd.addcolorstop(0,」 red」);

grd.addcolorstop(1,」 white」);

//填充漸變

ctx.fillstyle=grd;

ctx.fillrect(10,10,150,80)

1.img=new image();

2.img.src=」位址」

3.ctx.drawimage(this.img,0,0)

建立第乙個屬於自己的canvas小遊戲(開始創作)

建立html 建立乙個canvas標籤,指定高度與寬度,並在標籤中對不支援的瀏覽器給出相應的提示your browser shall not pass download google chrome to review this。準備工作 把所有的js 都放在這個自執行的函式中,從而防止變數洩露到全域...

建立乙個屬於自己的shell

1 寫乙個屬於自己的微型myshell 2 功能 myshell ls 3 能夠執行基礎linux 命令 4 5 6 include7 include8 include9 include10 include11 1 獲取終端輸入 12 2 解析輸入 按空格解析到乙個乙個的命令引數 13 3 建立乙個...

如何建立自己的第乙個gem

1 使用bundle gem hhg10建立乙個名為hhg10的資料夾 2 修改檔案為hhg10.gemsepc檔案。在相應的lib hhg10下完成相關功能的rb檔案寫 3 執行打包gem build hhg10.gemspec 會出現success built rubygem字眼成功 接下來就是...