nvas是定義在瀏覽器上的畫布。它不僅僅是一個(gè)標(biāo)簽元素更是一個(gè)編程工具是一套編程的接口。利用它可以開(kāi)發(fā)出很多東西，比如動(dòng)畫，游戲，動(dòng)態(tài)的圖表等富有變現(xiàn)力和感染力的應(yīng)用。還可以開(kāi)發(fā)出絢麗的3D動(dòng)態(tài)效果。接下來(lái)我們一起學(xué)習(xí)！

一、 創(chuàng)建canvas

1 2 3 4 5 6 7 8 canvas基礎(chǔ) 9 10 11 12 13 14 15

看一下現(xiàn)在的效果:

除了上述代碼那樣指定canvas的寬高，還可以在js中這樣指定:

1 var canvas = document.getElementById('canvas');2 3 canvas.width = 700;4 canvas.height = 400;

這樣邊框內(nèi)就是一個(gè)畫布了，接下來(lái)我們就可以在這畫布里進(jìn)行繪制了。

二 、 畫一條線段

1

看一下效果圖:

三 、 畫一個(gè)三角形并著色

1

效果圖:

四 、 繪制兩個(gè)圖形

1

效果圖:

五 、 繪制一個(gè)七巧板

1

效果圖:

六 、 繪制一段弧

1

context.arc各參數(shù)的含義:

1 　　context.arc(2 centerx , //圓心的x軸坐標(biāo)位置3 centery, //圓心的y軸坐標(biāo)位置4 radius, //圓弧半徑的值5 startingAngle, //以哪個(gè)弧度制開(kāi)始6 endingAngle, //在哪個(gè)弧度制結(jié)束7 anticlockwise=false //順時(shí)針?lè)较蚶L制,為true則逆時(shí)針。默認(rèn)為順時(shí)針。8 )

效果圖:

改為逆時(shí)針的話，在context.arc里面添加參數(shù)true

context.arc(300, 300, 200, 0, 1.5 * Math.PI,true);

效果圖:

七 、 繪制多段弧 和 著色

1

效果圖:

可以看出繪制多個(gè)弧也是使用beginPath()和closePath()。但是繪制出來(lái)的弧自動(dòng)的把首尾連接起來(lái)了，成了一個(gè)封閉的弧。這是因?yàn)?strong>closePath()的原因，如果想只是展示不封閉的弧，只需要把context.closePath()這段代碼去掉就行。beginPath()和closePath()并不一定成對(duì)出現(xiàn)。填充的時(shí)候，有closePath()和沒(méi)有closePath()效果是一樣的。

總結(jié)

以上是生活随笔為你收集整理的多个canvas画布合并_canvas的基础入门的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。