今天目標來用Canvas畫出一個的笑臉吧!

1.先建立Canvas物件

<canvas id="canvas1" width="150" height="150" style="border:1px solid #ccc;"></canvas>

只需要在HTML中使用<canvas>標籤，不過為了要讓Javascript可對這個Canvas進行操作，所以我們要加上id，之後才方便指定，border的部分是為了方便看到canvas物件在哪邊，實際使用的時候可以刪除不用，
小提醒： 這邊的width和height要指定，不能使用css來設定，不然畫的圖片比例會跑掉。

2.使用javascript指定canvas物件

<script>
var canvas = document.getElementById("canvas1");
</script>

這樣就能指定canvas物件

3.接著我們先來畫眼睛，畢竟眼睛是靈魂之窗

<script>
var canvas = document.getElementById("canvas1");
var ctx=canvas.getContext("2d");
// 指定參數
var eye_l_x=60;
var eye_l_y=60;
var eye_l_r=5;
var eye_r_x=90;
var eye_r_y=60;
var eye_r_r=5;

// 先畫左眼
ctx.beginPath();
ctx.arc(eye_l_x,eye_l_y,eye_l_r,0,2*Math.PI,true);

// 左眼填色
ctx.fillStyle = "#000";
ctx.fill();

// 畫右眼
ctx.beginPath();
ctx.arc(eye_r_x,eye_r_y,eye_r_r,0,2*Math.PI,true);
ctx.fillStyle = "#000";
ctx.fill();
</script>

 

　　就可以看到如上圖這樣的狀況，這是眼睛喔，這不是鼻孔，來說明一下上面的部分，

ctx.arc(圓心x座標,圓心y座標,半徑,開始角度,結束角度,是否要逆時針畫)

其中角度的單位是採用弧度(radian)，因此我們一般習慣的角度(deg)要經過換算

換算公式： 弧度(rad) = 角度(deg)*Math.PI/80;

4.接著來畫微笑的嘴巴及大圓臉

<script>
// 指定參數
var mouth_x=75;
var mouth_y=75;
var mouth_r=30;
var face_x=75;
var face_y=75;
var face_r=60;

// 先畫嘴巴
ctx.beginPath();
ctx.arc(mouth_x,mouth_y,mouth_r,30*Math.PI/180,150*Math.PI/180,false);

//畫上嘴巴的弧線
ctx.strokeStyle = "#000";
ctx.lineWidth = 3 ;
ctx.stroke();

// 臉
ctx.beginPath();
ctx.arc(face_x,face_y,face_r,0,2*Math.PI,false);
ctx.strokeStyle = "#000";
ctx.lineWidth = 15 ;
ctx.stroke();
</script>

 

這個部分和上面其實是使用相同的語法，只是沒有填色，多了畫框線的動作而已，其他的後續再慢慢和大家介紹