簡介
-
canvas標簽定義圖形，比如圖表，和其他圖像。 -
canvas標簽只是圖形容器，必須使用腳本來繪制圖形。 - canvas有兩個方向的軸，x和y軸，（0,0）點默認為左上角
canvas常用一些屬性和方法
width和height
canvas寬度和高度，都直接在標簽上設置，如果在css樣式中設置，顯現出來的高度和寬度可能不是設置的。
canvas有默認用默認的寬度和高度，300px
<canvas id="canvas" width="500" height="500">您的瀏覽器不支持canvas請升級最新版本</canvas>
標簽中的文字只有在瀏覽器不支持canvas時才會顯示
getContext()
大多數canvas繪圖API都沒有定義在canvas元素本身上，而是定義在通過畫布的getContext（）方法獲得的一個“繪圖環境”上。
var ctx = document.getElementById('canvas');
ctx.getContext('2d');
beginPath()
開始繪制
ctx.beginPath();
moveTo(x,y)
設置繪制的起點
有兩個參數：參數1：x軸方向的數值；參數2：y軸方向的數值。
ctx.moveTo（0,0);
lineTo(x,y)
繪制后續的點,后續點可以有多個
有兩個參數：參數1：x軸方向的數值；參數2:y軸方向的數值。
ctx.lineTo(250,250);
ctx.lineTo(500,0);
closePath()
關閉路徑，把終點和起點連接起來；不需要把終點和起點連接時可以不寫。
ctx.closePath();
stroke()，fill()
stroke描邊
fill填充
改變邊線的顏色
ctx.strokeStyle = 'red';
改變填充的顏色
ctx.fillStyle = 'green';
lineWidth
設置邊線的寬度，寬度以邊線為中心向兩邊平分
ctx.lineWidth = 5;
繪制矩形
使用stroke繪制矩形: ctx.storkeRect(x,y,w,h);
繪制有填充顏色的矩形：ctx.fillRect(x,y,w,h);
設置圓角
對線的尾部進行圓角設置（必須關閉closePath）
ctx.lineCap='round';
設置線的交匯處進行圓角處理
ctx.lineJoin='round';
繪制字體
設置字體大小和字體類型
ctx.font='50px 黑體';
繪制文字（文字默認是基線對齊）
設置水平對齊方式
ctx.textAline='right';
設置垂直對齊方式
ctx.textBaseline='bottom';
storkeText()繪制字體
ctx.strokeText('Hello,World',100,100);
fillText()繪制字體
ctx.fillText('Hello,World',100,300,100);
繪制圓
/*
參數1：圓心的x
參數2：圓心的y
參數3：圓的半徑
參數4：起點的位置，根據右側和設置的弧度制找到起點
參數5：終點的位置，根據右側和設置的弧度制找到終點
參數6：繪制的方向，true代表逆時針，false代表順時針
在這個里面的弧度用Math.PI表示。 Math.PI/2 代表90度；
設置度用 n*Math.PI/180 n為要設置的度數
*/
ctx.arc(250,250,200,Math.PI,Math.PI/2,false);
ctx.stroke();
繪制二次貝塞爾曲線和三次貝塞爾曲線
//繪制曲線(二次貝塞爾曲線)
//使用moveTo放置起點，
//使用quadraticCurveTo()放置基準點和終點
//參數1：基準點的x
//參數2：基準點的y
//參數3：終點的x
//參數4：終點的y
ctx.moveTo(0,0);
ctx.quadraticCurveTo(250,500,500,0);
ctx.stroke();
//繪制曲線(三次貝塞爾曲線)
//參數1: 基準點1的x
//參數2: 基準點1的y
//參數3: 基準點2的x
//參數4: 基準點2的y
//參數5: 終點點1的x
//參數6: 終點點1的y
ctx.moveTo(0,0);
ctx.bezierCurveTo(500,0,0,500,500,500);
ctx.stroke();
畫圖像img
//如果想把圖像畫到canvas中，需要先創建image對象
var img=new Image();
img.src='images/1.jpg';
img.onload=function (){
//必須等圖片加載完成之后，才可以進行繪制
/*
參數：參數1：img;
參數2：x；
參數3：y；
參數4：寬度width；
參數5：高度height；
參數6：圖片上的要顯示的起點x；
參數7：圖片上的要顯示的起點y；
參數8：圖片上以起點開始要顯示的寬度width；
參數9：圖片上以起點開始要顯示的高度height；
*/
// ctx.drawImage(img,10,10);
// ctx.drawImage(img,10,10,200,200);
ctx.drawImage(img,10,10,200,200,100,100,200,200);
}
清除畫布
畫布的清除一般在做動畫時使用
//清除畫布
//四個參數：x,y,w,h
// ctx.clearRect(10,10,200,200);
坐標系移動
ctx.translate(x,y);
坐標系旋轉
坐標系的旋轉以（0,0）原點為中心
ctx.rotate(Math.PI/6);
簡單示例：
時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: #000;
}
canvas{
background: #fff;
}
</style>
</head>
<body>
<canvas id="cc" width="400px" height="400px"></canvas>
<script>
var cc = document.getElementById('cc');
var ctx = cc.getContext('2d');
function time(){
var x = 200;
var y = 200;
var r = 150;
var oDate = new Date();
var hours = oDate.getHours();
var minutes = oDate.getMinutes();
var seconds = oDate.getSeconds();
var hValue = (-90 + hours * 30 + minutes/2)*Math.PI/180;
var mValue = (-90 + minutes * 6)*Math.PI/180;
var sValue = (-90 + seconds * 6)*Math.PI/180;
ctx.beginPath();
for(var i=0; i<60 ; i++){
ctx.moveTo(x,y);
ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
//蓋圓盤
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*18/20,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
//時
ctx.lineWidth = 3;
ctx.beginPath();
for(var i=0; i<12 ; i++){
ctx.moveTo(x,y);
ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
//蓋圓盤
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*16/20,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
//時針
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*8/20,hValue,hValue,false);
ctx.closePath();
ctx.stroke();
//分針
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*14/20,mValue,mValue,false);
ctx.closePath();
ctx.stroke();
//秒針
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r*16/20,sValue,sValue,false);
ctx.closePath();
ctx.stroke();
}
setInterval(time,1000);
</script>
</body>
</html>
