HTML5畫布Canvas線段、矩形、弧形及貝塞爾曲線等簡單圖形繪製

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）！