0x001 Canvas是啥？
說白了Canvas就是一塊畫布，可以使用js當畫筆在上面繪畫的畫布，可以顯示在網頁上的畫布，同時也是通過期中考的關鍵技術。
0x002 Canvas坐標圖
Paste_Image.png
0x003 Canvas使用方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas測試</title>
</head>
<body>
<!-- 建立了一個高300px，寬300px的的畫布 -->
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Paste_Image.png
0x004 Canvas替代內容
如果不支持就用文本代替，不過如今大多數(shù)瀏覽器已經可以支持了，所以我也找不到瀏覽器測試是否可以用一張圖片代替。
<canvas id="canvas" width="300" height="300">
小傻逼瀏覽器不支持Canvas</canvas>
0x005 Canvas和CSS
canvas元素和其他html元素一樣，可以使用css來改變canvas的一些樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas測試</title>
<style media="screen">
#canvas{
width: 200px;
height: 300px;
margin: 10px;
border: 5px solid red;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
Paste_Image.png
但是這樣是有問題的看以下案例，它將會繪制一條對角線
但是這樣其實是有問題的，因為canvas的默認高度是300*150，所以，如果使用css為canvas設置width和height會導致canvas繪制的圖像被壓縮。所以還是使用屬性來設置canvas的寬高吧
0x006 canvasAPI
canvas頁面,我們將再紅色方框的canvas內繪制：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas測試</title>
<style media="screen">
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="border: 5px solid red"></canvas>
</body>
<script type="text/javascript">
</script>
</html>
Paste_Image.png
繪制一條直線
- 代碼：
// 獲取canvas元素
var canvas=document.getElementById("canvas");
// 獲取canvas上下文
var context=canvas.getContext('2d');
// 繪制直線
context.beginPath();//開始繪制路徑
context.moveTo(0,500);//設置開始點
context.lineTo(500,0);//設置結束點并連接開始點和結束點
context.stroke();//將圖像繪制出來
-
效果
Paste_Image.png
路徑
- 代碼
// 獲取canvas元素
var canvas=document.getElementById("canvas");
// 獲取canvas上下文
var context=canvas.getContext('2d');
// 繪制直線
context.beginPath();
context.moveTo(0,0);
context.lineTo(0,100);
context.lineTo(0,100);
context.lineTo(100,100);
context.lineTo(100,200);
context.lineTo(200,200);
context.lineTo(200,300);
context.lineTo(300,300);
context.lineTo(300,400);
context.lineTo(400,400);
context.lineTo(400,500);
context.lineTo(500,500);
context.stroke();
- 效果：
Paste_Image.png
繪制一棵樹
-
代碼：
// 獲取canvas元素 var canvas=document.getElementById("canvas"); // 獲取canvas上下文 var context=canvas.getContext('2d'); // 繪制直線 context.beginPath(); context.moveTo(100,100); context.lineTo(50,200); context.lineTo(90,200); context.lineTo(40,300); context.lineTo(80,300); context.lineTo(30,400); context.lineTo(70,400); context.lineTo(70,500); context.lineTo(130,500); context.lineTo(130,400); context.lineTo(170,400); context.lineTo(120,300); context.lineTo(160,300); context.lineTo(110,200); context.lineTo(150,200); context.closePath(); context.stroke(); 效果
Paste_Image.png
修改樣式
-
代碼：
// 獲取canvas元素 var canvas=document.getElementById("canvas"); // 獲取canvas上下文 var context=canvas.getContext('2d'); // 繪制直線 context.beginPath(); context.moveTo(100,100); context.lineTo(50,200); context.lineTo(90,200); context.lineTo(40,300); context.lineTo(80,300); context.lineTo(30,400); context.lineTo(70,400); context.lineTo(70,500); context.lineTo(130,500); context.lineTo(130,400); context.lineTo(170,400); context.lineTo(120,300); context.lineTo(160,300); context.lineTo(110,200); context.lineTo(150,200); context.lineWidth=8; context.lineJoin='round'; context.strokeStyle='#663300'; context.closePath(); context.stroke(); 效果：
Paste_Image.png
填充
-
代碼 ：
context.fillStyle="red"; context.fill(); 效果：
Paste_Image.png
繪制正方形
-
代碼
var canvas=document.getElementById("canvas"); // 獲取canvas上下文 var context=canvas.getContext('2d'); context.fillStyle="red"; //前兩個參數(shù)數(shù)位置x、y，后兩個參數(shù)是寬、高 context.fillRect(100,100,100,100); context.stroke(); 效果
Paste_Image.png
繪制曲線
- 說明：
Paste_Image.png
-
代碼：
var canvas=document.getElementById("canvas"); // 獲取canvas上下文 var context=canvas.getContext('2d'); //指定起點 context.moveTo(250,0); //前兩個是控制點，后兩個是終點 context.quadraticCurveTo(250,250,500,250); context.strokeStyle="red"; context.lineWidth=20; context.stroke(); 效果
Paste_Image.png
圓形：
-
代碼：
// 獲取canvas元素 var canvas=document.getElementById("canvas"); // 獲取canvas上下文 var context=canvas.getContext('2d'); context.beginPath(); // 前兩個分別是圓心的x、y坐標， //第三個是圓的半徑， //第四第五個是繪制弧線的開始弧度和結束弧度 1*Math.PI是半圓，2*Math.PI則是一個圓 context.arc(100,100,100,0,2*Math.PI); context.stroke(); context.closePath(); //弧度的開始是從3點鐘位置開始 context.beginPath(); context.arc(300,300,100,0,0.1*Math.PI); context.stroke(); 效果
Paste_Image.png
漸變
-
代碼：
// 獲取canvas元素
var canvas=document.getElementById("canvas");
// 獲取canvas上下文
var context=canvas.getContext('2d');
//前兩個參數(shù)指定開始的點的x、y坐標，后兩個是結束的點的x、y坐標
var lg=context.createLinearGradient(0,0,100,0);
lg.addColorStop(0,"#ff0000");
lg.addColorStop(0.5,"#00ff00");
lg.addColorStop(1,"#0000ff");
context.fillStyle=lg;
context.fillRect(0,0,175,50);//注意漸變色相對位置是context，不是rect //如果繪制的圖像超出了漸變色的坐標 //將會使用最后設置的顏色來填充 var lg=context.createLinearGradient(0,0,100,0); lg.addColorStop(0,"#ff0000"); lg.addColorStop(0.5,"#00ff00"); //使用藍色填充 lg.addColorStop(1,"#0000ff"); context.fillStyle=lg; context.fillRect(200,200,100,100); //如果漸變 線是斜的， 那么最后填充的漸變也是斜的 var lg=context.createLinearGradient(200,200,400,400); lg.addColorStop(0,"#ff0000"); lg.addColorStop(0.5,"#00ff00"); //使用藍色填充 lg.addColorStop(1,"#0000ff"); context.fillStyle=lg; context.fillRect(200,200,200,200); //徑向漸變 var lg=context.createRadialGradient(50,450,0,80,500,100); lg.addColorStop(0,"#ff0000"); lg.addColorStop(0.5,"#00ff00"); //使用藍色填充 lg.addColorStop(1,"#0000ff"); context.fillStyle=lg; context.fillRect(0,400,200,200); 效果：
Paste_Image.png
大項目：繪制一堆不斷變大變小的隨機移動的氣泡
- 效果：
GIF.gif
-
html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>氣泡變化</title> </head> <body> <canvas id="canvas" width="1200px" height="800px"> </canvas> </body> <script src="main.js"> </script> </html> -
獲取context
var canvas=document.querySelector('canvas'), context=canvas.getContext('2d'); // 這個數(shù)組用于保存畫布上出現(xiàn)的所有球 var balls = []; -
構建一個氣泡對象
// 用于表示球的所有細節(jié)的Ball函數(shù) // x、y分別是氣泡初始化的位置 //radius是氣泡的半徑-隨機 //strokeColor 繪制顏色 -隨機 //填充顏色-隨機 //flag半徑變大還是變小 //flagx x增大還是減小 //flagy y增加還是減少 function Ball(x, y) { this.x = x; this.y = y; this.radius = Math.round(Math.random()*10)*10; this.strokeColor = 'rgba('+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+',0)'; this.fillColor = 'rgba('+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)*25+','+Math.round(Math.random()*10)/10+')'; this.flag=1; this.flagx=1; this.flagy=1; } -
向數(shù)組添加小球
function addBall() { // 小球半徑 var radius = Math.round(Math.random()*10)*10; var x=0,y=0; if (x<200||x>1000){ x=Math.round(Math.random()*10)*100; } if (y<200||x>600){ y=Math.round(Math.random()*10)*60; } // 創(chuàng)建新的ball對象 var ball = new Ball(x,y); // 將其保存在balls數(shù)組中 balls.push(ball); } 繪制圖像并且在20ms后再次繪制
function drawFrame() {
// 清除畫布
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
// 循環(huán)所有的球,并重新定義他們的位置和大小
for(var i=0; i<balls.length; i++) {
if (balls[i].flagx==1){
balls[i].x++;
if (balls[i].x>=800){
balls[i].flagx=0;
}
}else if(balls[i].flagx==0){
balls[i].x--;
if (balls[i].x<=0){
balls[i].flagx=1;
}
}
if (balls[i].flagy==1){
balls[i].y++;
if (balls[i].y>=600){
balls[i].flagy=0;
}
}else if(balls[i].flagy==0){
balls[i].y--;
if (balls[i].y<=0){
balls[i].flagy=1;
}
}
if (balls[i].flag==1){
balls[i].radius++;
balls[i].y++;
if (balls[i].radius>=100){
balls[i].flag=0;
}
}else if (balls[i].flag==0){
balls[i].radius--;
balls[i].x--;
balls[i].y--;
if (balls[i].radius<=0){
balls[i].flag=1;
}
}
var ball = balls[i];
context.beginPath();
context.fillStyle = balls[i].fillColor;
context.strokeStyle=balls[i].strokeColor;
// 繪制球
context.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI*2);
context.lineWidth = 0;
context.fill();
context.stroke();
}
// 20毫秒后繪制下一幀
setTimeout(drawFrame, 20);
}
-
調用并且初始化小球
for(var i=0;i<50;i++){ addBall(); } drawFrame();
