nvas是定義在瀏覽器上的畫布。它不僅僅是一個標簽元素更是一個編程工具是一套編程的接口。利用它可以開發出很多東西，比如動畫，游戲，動態的圖表等富有變現力和感染力的應用。還可以開發出絢麗的3D動態效果。接下來我們一起學習！

一、 創建canvas

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

看一下現在的效果:

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

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

這樣邊框內就是一個畫布了，接下來我們就可以在這畫布里進行繪制了。

二 、 畫一條線段

1

看一下效果圖:

三 、 畫一個三角形并著色

1

效果圖:

四 、 繪制兩個圖形

1

效果圖:

五 、 繪制一個七巧板

1

效果圖:

六 、 繪制一段弧

1

context.arc各參數的含義:

1 　　context.arc(2 centerx , //圓心的x軸坐標位置3 centery, //圓心的y軸坐標位置4 radius, //圓弧半徑的值5 startingAngle, //以哪個弧度制開始6 endingAngle, //在哪個弧度制結束7 anticlockwise=false //順時針方向繪制,為true則逆時針。默認為順時針。8 )

效果圖:

改為逆時針的話，在context.arc里面添加參數true

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

效果圖:

七 、 繪制多段弧 和 著色

1

效果圖:

可以看出繪制多個弧也是使用beginPath()和closePath()。但是繪制出來的弧自動的把首尾連接起來了，成了一個封閉的弧。這是因為closePath()的原因，如果想只是展示不封閉的弧，只需要把context.closePath()這段代碼去掉就行。beginPath()和closePath()并不一定成對出現。填充的時候，有closePath()和沒有closePath()效果是一樣的。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。