HTML5中最有意思的就是這個canvas了
透過它我們可以畫自己想要的圖形
它也是十分重要的技術
應用於遊戲、圖表等等
或繪製各種酷炫的東西
這裡給大家分享一個網站傳送門
裡面都是canvas技術繪製的圖形
# canvas是html的標籤
是一個圖形容器
首先要在html頁面新增一個canvas元素
<canvas id="myCanvas" width=500 height=500></canvas>
為了後面我們的使用，我加入了id
width與height定義了畫布的大小
不過要注意，這與css樣式的width與height不同
舉個例子，如果我在css樣式中添加這樣的樣式
#myCanvas { border: 1px solid black; width: 250px; height: 250px;}定義border邊框是為了讓我們清楚畫布的位置
如果不設定css樣式的width和height，那麼畫布大小就是我們在canvas標籤上定義的寬500和高500
但是這裡我定義了樣式寬高，所以我們的畫佈在網頁中實際的大小相當於被縮小了1倍
（canvas的最大畫布座標仍然是500×500）
html文件中我們要做的只是添加一個canvas標籤
下面我們需要使用腳本來繪製圖形
取得元素我們都知道
var myCanvas = document.getElementById('myCanvas');
下面的程式碼用於取得上下文物件/環境物件
var ctx = myCanvas.getContext('2d');
getContext用於指定一個繪圖環境
這裡我們使用最常用的二維繪圖
使用getContext('2d')
（getContext('webgl')用於3D繪圖）
取得到的ctx是一個物件（CanvasRenderingContext2D物件）
用以到處二位繪圖API
再通俗的說，canvas元素物件是我們的「畫布」
而透過getContext('2d ')取得的環境物件就是我們的“畫筆”
下面我們所有的操作都需要是用“畫筆”，也就是這個上下文物件（這裡就是變數ctx）
下面我們就來繪製最簡單的圖形－線段
現在網頁上已經有了一個500×500的畫布
我們先來畫一條斜線
ctx.moveTo(100, 100);ctx.lineTo(400, 400);ctx.stroke();
moveTo()用來指定繪製線段的起點
lineTo()用來指定繪製線段的終點（或是途經點）
stroke()先不說，現在只要知道沒有它畫不出來
#了解了這些，我們現在可以畫一個三角形
只要添加兩行程式碼
ctx.moveTo(100, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400); //增ctx.lineTo(100, 100); //增ctx.stroke();
看來似乎不錯
現在再教大家如何改變線段寬度
改變lineWidth
ctx.lineWidth = 50; //增ctx.moveTo(100, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400);ctx.lineTo(100, 100);ctx.stroke();
#這回發現了問題
當我們把線段變粗後
起點與終點不能很好的連接
這時我們需要另一個函數closePath()
ctx.lineWidth = 50;ctx.moveTo(100, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400);ctx.closePath(); //改ctx.stroke();
#closePath()就是為了解決這樣閉合圖形的問題
它使我們繪製了完美的閉合三角形
最後解釋一下stroke()
它表示繪製空心圖形
除此之外還有繪製實心圖形的fill()
ctx.lineWidth = 50;ctx.moveTo(100, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400);ctx.closePath();ctx.fill(); //改
沒有它們中的一個，我們就不能繪製出圖形啦
可以理解為前面都是定義規則，而stroke()或fill()是真正的執行官
還有一點要注意
fill()和stroke()都是作用在當前的所有子路徑
如果在完成一條路徑之後想要開始另一條路徑
必須使用beginPath()方法
看下面的例子(strokeStyle/fillStyle用來設定我們線段的顏色)
ctx.lineWidth = 60; ctx.strokeStyle = 'red'; ctx.moveTo(100, 100); ctx.lineTo(100, 400); ctx.stroke(); ctx.lineWidth = 20; ctx.strokeStyle = 'blue'; ctx.moveTo(400, 100); ctx.lineTo(400, 400); ctx.stroke();
最終的結果可能和大家想的不一樣
因為引擎認為它們是一條路徑
所有下面的屬性覆蓋了上面的屬性
解決辦法就是這樣
//一条路径ctx.lineWidth = 60; ctx.strokeStyle = 'red'; ctx.moveTo(100, 100); ctx.lineTo(100, 400); ctx.stroke(); ctx.beginPath(); //增//另一条路径ctx.lineWidth = 20; ctx.strokeStyle = 'blue'; ctx.moveTo(400, 100); ctx.lineTo(400, 400); ctx.stroke();
使用我們上面學到的方法也可以輕鬆實作一個矩形
ctx.moveTo(100, 100);ctx.lineTo(400, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 400);ctx.closePath();ctx.stroke();
#不過這程式碼過於冗長
我們有更簡單的方法
ctx.rect(100, 100, 300, 300);ctx.stroke();
前兩個參數就是起始畫布座標，後兩個參數表示矩形的寬和高
不過我們還有更簡單的
ctx.strokeRect(100, 100, 300, 300);
大家一定猜到了，還有一個畫實心矩形的fillRect()
ctx.fillRect(100, 100, 300, 300);
有了strokeRect()和fillRect()我們就完全沒必要使用rect()了
clearRect()可以让我们擦除画布上的矩形区域
这就类似于我们的橡皮擦
比如说我在实心矩形中间挖走一块矩形区域
ctx.fillRect(100, 100, 300, 300);ctx.clearRect(150, 150, 200, 200);
现在我们可以利用这个方法实现一个矩形下落的效果
var width = 500,
height = 500,
y = 50;var timer = setInterval(function(){
ctx.clearRect(0, 0, width, height);
ctx.fillRect(100, y++, 50, 50); if(y > 400){
clearInterval(timer);
}
}, 5);
重点就是
每次更新矩形之前，清除一下画布
绘制弧形使用方法
arc(x, y, r, 起始弧度, 结束弧度, 弧线方向)
这里要知道画布的坐标系和浏览器坐标系是一样的
x正半轴朝右
y正半轴朝下
参数中x,y表示弧心（或者理解为圆心）
r就是半径
弧线方向0为顺时针，1为逆时针
下面我们来使用这个方法
先来画一段弧
ctx.arc(250, 250, 200, 0, Math.PI/2, 0);ctx.stroke();
画一个圆
ctx.arc(250, 250, 200, 0, 2*Math.PI, 0);ctx.stroke();
画一个吃豆人
ctx.moveTo(250, 250);ctx.lineTo(450, 250);ctx.arc(250, 250, 200, 0, Math.PI/3, 1);ctx.closePath();ctx.stroke();
绘制弧形除此之外，还有一个方法
arcTo(x1, y1, x2, y2, r)
r是弧的半径
它的使用方法参照下面的图片 
配合我们的线段绘制
可以画出圆角矩形
ctx.moveTo(250, 100); ctx.arcTo(400, 100, 400, 400, 30); ctx.arcTo(400, 400, 100, 400, 30); ctx.arcTo(100, 400, 100, 100, 30); ctx.arcTo(100, 100, 400, 100, 30); ctx.closePath(); ctx.stroke();
还有更高级的方法就是可以绘制贝塞尔曲线
简单了解就好，不常用
二次贝塞尔曲线 quadraticCurveTo(x1, y1, ex, ey)
三次贝塞尔曲线 bezierCurveTo(x1, y1, x2, y2, ex, ey)
其中x1,y1,x2,y2分别是第一个和第二个控制点的坐标
ex和ey是终点坐标
这里我就盗用网上大神做的图片了
二次贝塞尔曲线： 
ctx.moveTo(40,340); ctx.lineTo(260,80); ctx.lineTo(360,300); ctx.stroke(); /*绘制二次贝塞尔曲线 */ ctx.beginPath(); ctx.moveTo(40,340); ctx.quadraticCurveTo(260,80,360,300); ctx.strokeStyle = "#f40"; ctx.stroke();
三次贝塞尔曲线： 
ctx.moveTo(50, 350); ctx.lineTo(120, 160); ctx.lineTo(300, 60); ctx.lineTo(340, 300); ctx.stroke(); /*绘制三次贝塞尔曲线 */ ctx.beginPath(); ctx.moveTo(50, 350); ctx.bezierCurveTo(120, 160, 300, 60, 340, 300); ctx.strokeStyle = "#f40"; ctx.stroke();
以上就是HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制的内容，更多相关内容请关注PHP中文网（www.php.cn）！
