簡介
-
canvas標(biāo)簽定義圖形，比如圖表拴念，和其他圖像钧萍。 -
canvas標(biāo)簽只是圖形容器，必須使用腳本來繪制圖形政鼠。 - canvas有兩個方向的軸风瘦，x和y軸，（0,0）點(diǎn)默認(rèn)為左上角
canvas常用一些屬性和方法
width和height
canvas寬度和高度缔俄，都直接在標(biāo)簽上設(shè)置弛秋，如果在css樣式中設(shè)置器躏，顯現(xiàn)出來的高度和寬度可能不是設(shè)置的俐载。
canvas有默認(rèn)用默認(rèn)的寬度和高度，300px
<canvas id="canvas" width="500" height="500">您的瀏覽器不支持canvas請升級最新版本</canvas>
標(biāo)簽中的文字只有在瀏覽器不支持canvas時才會顯示
getContext()
大多數(shù)canvas繪圖API都沒有定義在canvas元素本身上登失，而是定義在通過畫布的getContext（）方法獲得的一個“繪圖環(huán)境”上遏佣。
var ctx = document.getElementById('canvas');
ctx.getContext('2d');
beginPath()
開始繪制
ctx.beginPath();
moveTo(x,y)
設(shè)置繪制的起點(diǎn)
有兩個參數(shù)：參數(shù)1：x軸方向的數(shù)值；參數(shù)2：y軸方向的數(shù)值揽浙。
ctx.moveTo（0,0);
lineTo(x,y)
繪制后續(xù)的點(diǎn),后續(xù)點(diǎn)可以有多個
有兩個參數(shù)：參數(shù)1：x軸方向的數(shù)值状婶；參數(shù)2:y軸方向的數(shù)值意敛。
ctx.lineTo(250,250);
ctx.lineTo(500,0);
closePath()
關(guān)閉路徑，把終點(diǎn)和起點(diǎn)連接起來膛虫；不需要把終點(diǎn)和起點(diǎn)連接時可以不寫草姻。
ctx.closePath();
stroke()，fill()
stroke描邊
fill填充
改變邊線的顏色
ctx.strokeStyle = 'red';
改變填充的顏色
ctx.fillStyle = 'green';
lineWidth
設(shè)置邊線的寬度稍刀，寬度以邊線為中心向兩邊平分
ctx.lineWidth = 5;
繪制矩形
使用stroke繪制矩形: ctx.storkeRect(x,y,w,h);
繪制有填充顏色的矩形：ctx.fillRect(x,y,w,h);
設(shè)置圓角
對線的尾部進(jìn)行圓角設(shè)置（必須關(guān)閉closePath）
ctx.lineCap='round';
設(shè)置線的交匯處進(jìn)行圓角處理
ctx.lineJoin='round';
繪制字體
設(shè)置字體大小和字體類型
ctx.font='50px 黑體';
繪制文字（文字默認(rèn)是基線對齊）
設(shè)置水平對齊方式
ctx.textAline='right';
設(shè)置垂直對齊方式
ctx.textBaseline='bottom';
storkeText()繪制字體
ctx.strokeText('Hello,World',100,100);
fillText()繪制字體
ctx.fillText('Hello,World',100,300,100);
繪制圓
/*
參數(shù)1：圓心的x
參數(shù)2：圓心的y
參數(shù)3：圓的半徑
參數(shù)4：起點(diǎn)的位置撩独，根據(jù)右側(cè)和設(shè)置的弧度制找到起點(diǎn)
參數(shù)5：終點(diǎn)的位置，根據(jù)右側(cè)和設(shè)置的弧度制找到終點(diǎn)
參數(shù)6：繪制的方向账月，true代表逆時針综膀，false代表順時針
在這個里面的弧度用Math.PI表示。 Math.PI/2 代表90度局齿；
設(shè)置度用 n*Math.PI/180 n為要設(shè)置的度數(shù)
*/
ctx.arc(250,250,200,Math.PI,Math.PI/2,false);
ctx.stroke();
繪制二次貝塞爾曲線和三次貝塞爾曲線
//繪制曲線(二次貝塞爾曲線)
//使用moveTo放置起點(diǎn)剧劝，
//使用quadraticCurveTo()放置基準(zhǔn)點(diǎn)和終點(diǎn)
//參數(shù)1：基準(zhǔn)點(diǎn)的x
//參數(shù)2：基準(zhǔn)點(diǎn)的y
//參數(shù)3：終點(diǎn)的x
//參數(shù)4：終點(diǎn)的y
ctx.moveTo(0,0);
ctx.quadraticCurveTo(250,500,500,0);
ctx.stroke();
//繪制曲線(三次貝塞爾曲線)
//參數(shù)1: 基準(zhǔn)點(diǎn)1的x
//參數(shù)2: 基準(zhǔn)點(diǎn)1的y
//參數(shù)3: 基準(zhǔn)點(diǎn)2的x
//參數(shù)4: 基準(zhǔn)點(diǎn)2的y
//參數(shù)5: 終點(diǎn)點(diǎn)1的x
//參數(shù)6: 終點(diǎn)點(diǎn)1的y
ctx.moveTo(0,0);
ctx.bezierCurveTo(500,0,0,500,500,500);
ctx.stroke();
畫圖像img
//如果想把圖像畫到canvas中，需要先創(chuàng)建image對象
var img=new Image();
img.src='images/1.jpg';
img.onload=function (){
//必須等圖片加載完成之后抓歼，才可以進(jìn)行繪制
/*
參數(shù)：參數(shù)1：img;
參數(shù)2：x讥此；
參數(shù)3：y；
參數(shù)4：寬度width谣妻；
參數(shù)5：高度height暂论；
參數(shù)6：圖片上的要顯示的起點(diǎn)x；
參數(shù)7：圖片上的要顯示的起點(diǎn)y拌禾；
參數(shù)8：圖片上以起點(diǎn)開始要顯示的寬度width取胎；
參數(shù)9：圖片上以起點(diǎn)開始要顯示的高度height；
*/
// ctx.drawImage(img,10,10);
// ctx.drawImage(img,10,10,200,200);
ctx.drawImage(img,10,10,200,200,100,100,200,200);
}
清除畫布
畫布的清除一般在做動畫時使用
//清除畫布
//四個參數(shù)：x,y,w,h
// ctx.clearRect(10,10,200,200);
坐標(biāo)系移動
ctx.translate(x,y);
坐標(biāo)系旋轉(zhuǎn)
坐標(biāo)系的旋轉(zhuǎn)以（0,0）原點(diǎn)為中心
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>
