canvas 畫布
標(biāo)簽： web前端
直接上代碼叨叨
<canvas id="canvas" width="500" height="500">您的瀏覽器不支持canvas請點此升級</canvas>
注意 ： canvas的寬高只能在標(biāo)簽上設(shè)置，千萬不要在css中設(shè)置杏头，不是不能設(shè)置而是設(shè)置的值不是你所設(shè)置的。
- 首先寫個簡單的三角形
<script>
var canvas = document.getElementById('canvas');
// 畫筆
var ctx = canvas.getContext('2d');
// 開始繪制
ctx.beginPath();
// 開始繪制
ctx.moveTo(0,0);
// 繪制后續(xù)的點
ctx.lineTo(250,250);
ctx.lineTo(500,0);
// closePath（）也叫關(guān)閉路徑沸呐，會把終點和起點連接起來醇王，進(jìn)行繪制；當(dāng)需要終點和起點連接崭添，才使用closePath
ctx.closePath();
//畫（填）
//設(shè)置顏色
ctx.strokeStyle='blue';
//設(shè)置線的寬度（寬度是中間向兩邊評分的）
ctx.lineWidth=50;
</script>
- 填充ctx.fill();
設(shè)置填充顏色是：ctx.fillStyle = 'red';
繪制矩形: 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';
- 繪制字體
// ctx.font='50px 黑體';
//繪制文字（文字默認(rèn)是基線對齊）
// ctx.textAline='right';//設(shè)置水平對齊方式
// ctx.textBaseline='bottom';// 設(shè)置垂直對齊方式
// ctx.strokeText('Hello,World',100,100);
// ctx.fillText('Hello,World',100,300,100);
- 繪制圓
/*
參數(shù)1：圓心的x
參數(shù)2：圓心的y
參數(shù)3：圓的半徑
參數(shù)4：起點的位置寓娩，根據(jù)右側(cè)和設(shè)置的弧度制找到起點
參數(shù)5：終點的位置，根據(jù)右側(cè)和設(shè)置的弧度制找到終點
參數(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放置起點焊夸，
//使用quadraticCurveTo()放置基準(zhǔn)點和終點
//參數(shù)1：基準(zhǔn)點的x
//參數(shù)2：基準(zhǔn)點的y
//參數(shù)3：終點的x
//參數(shù)4：終點的y
ctx.moveTo(0,0);
ctx.quadraticCurveTo(250,500,500,0);
ctx.stroke();
//繪制曲線(三次貝塞爾曲線)
//參數(shù)1: 基準(zhǔn)點1的x
//參數(shù)2: 基準(zhǔn)點1的y
//參數(shù)3: 基準(zhǔn)點2的x
//參數(shù)4: 基準(zhǔn)點2的y
//參數(shù)5: 終點點1的x
//參數(shù)6: 終點點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：圖片上的要顯示的起點x昌抠；
參數(shù)7：圖片上的要顯示的起點y；
參數(shù)8：圖片上以起點開始要顯示的寬度width遣钳；
參數(shù)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);
}
- 清除畫布
畫布的清除一般在做動畫時使用
//清除畫布
//四個參數(shù)：x,y,w,h
// ctx.clearRect(10,10,200,200);
- 坐標(biāo)系移動
ctx.translate(x,y);
- 坐標(biāo)系旋轉(zhuǎn)
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>
