canvas 畫布
標簽： web前端
直接上代碼叨叨
<canvas id="canvas" width="500" height="500">您的瀏覽器不支持canvas請點此升級</canvas>
注意 ： canvas的寬高只能在標簽上設置，千萬不要在css中設置，不是不能設置而是設置的值不是你所設置的。
- 首先寫個簡單的三角形
<script>
var canvas = document.getElementById('canvas');
// 畫筆
var ctx = canvas.getContext('2d');
// 開始繪制
ctx.beginPath();
// 開始繪制
ctx.moveTo(0,0);
// 繪制后續的點
ctx.lineTo(250,250);
ctx.lineTo(500,0);
// closePath（）也叫關閉路徑，會把終點和起點連接起來，進行繪制；當需要終點和起點連接，才使用closePath
ctx.closePath();
//畫（填）
//設置顏色
ctx.strokeStyle='blue';
//設置線的寬度（寬度是中間向兩邊評分的）
ctx.lineWidth=50;
</script>
- 填充ctx.fill();
設置填充顏色是：ctx.fillStyle = 'red';
繪制矩形: 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';// 設置垂直對齊方式
// ctx.strokeText('Hello,World',100,100);
// 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);
- 坐標系旋轉
ctx.rotate(Math.PI/6);
下面是用canvas寫的一個時鐘，（為了便于理解 寫的有點low）
<!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>
