整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML5簡稱H5，現在因為很火，很多人都在學。canvas是屬于H5里面的一個標簽,它有很強大的繪畫功能。當然，這些功能不是說用HTML標簽就能實現，它還要結合JavaScript一起完成。
這次是用canvas繪畫簡單的時鐘，整體思路：先畫框drawBackground，然后把時針(drawHour)，分針(drawMinute)，秒針(drawSecond)分別畫出來. 畫完之后就開始實現動畫了。動畫實現是先清除整個繪畫，然后再重新畫一遍鐘，每秒執行一次。
//canvas的div結構 內容很少
<div>
<canvas id="clock" height="600px" width="600px"></canvas>
</div>
//先畫框
function drawBackground(){
ctx.save();//保存當前環境狀態
ctx.translate(r,r);//重新定義原點坐標，正方形的正中心
ctx.beginPath();//起始路徑
ctx.lineWidth = 10 * em;//加粗10像素
ctx.arc(0,0,r-5*em,0,2*Math.PI,false);//創建圓
ctx.stroke();//設置繪畫方式，畫線
var hours = [3,4,5,6,7,8,9,10,11,12,1,2];//定義時間數組
ctx.font = 16 * em + "px Arial"http://字體和字體大小
ctx.textAlign = 'center';//數字相對圓心左右兩邊居中
ctx.textBaseline = 'middle';//數字相對圓心上線兩邊居中
//畫時刻
hours.forEach(function(number , i){
var rad = 2 * Math.PI / 12 * i; //把圓分12個弧度
var x = Math.cos(rad) * (r - 30 * em);
var y = Math.sin(rad) * (r - 30 * em);
ctx.fillText(number , x, y);
});
//畫點
for(var i=0;i < 60 ; i++){
var rad = 2 * Math.PI / 60 *i;
var x = Math.cos(rad) * (r - 18 * em);
var y = Math.sin(rad) * (r - 18 * em);
ctx.beginPath();
//如果是整時就實黑點 不是就虛點
if(i % 5 === 0){
ctx.fillStyle = '#000';
ctx.arc(x, y, 2 * em, 0, 2 * Math.PI, false);
}else{
ctx.fillStyle = '#ccc';
ctx.arc(x, y, 2 * em, 0, 2 * Math.PI, false);
}
ctx.fill();//填充
}
}
//畫時針
function drawHour(hour, minute){
ctx.save();
var rad = 2 * Math.PI / 12 * hour;
var mrad = 2 * Math.PI / 12 / 60 * minute;
ctx.beginPath();
ctx.rotate(rad + mrad);//旋轉角度
ctx.lineWidth = 6 * em;//時針寬度
ctx.lineCap = 'round';//線條的每個末端添加圓形線帽
ctx.moveTo(0, 10 * em);
ctx.lineTo(0, -r / 2);
ctx.stroke();
ctx.restore();
}
//畫分針
function drawMinute(minute){
ctx.save();
var rad = 2 * Math.PI / 60 * minute;
ctx.beginPath();
ctx.rotate(rad);//旋轉角度
ctx.lineCap = 'round';//線條的每個末端添加圓形線帽
ctx.lineWidth = 4 * em;
ctx.moveTo(0, 10 * em);
ctx.lineTo(0, -r + 30 * em);
ctx.stroke();
ctx.restore();
}
//畫秒針
function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle = '#c14543';
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.moveTo(-2 * em, 20 * em);
ctx.lineTo(2 * em, 20 * em);
ctx.lineTo(1, -r + 18 * em);
ctx.lineTo(-1, -r + 18 * em);
ctx.fill();
ctx.restore();
}
//畫中心點
function drawDot(){
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, 0, 3 * em, 2*Math.PI, false);
ctx.fill();
}
//獲取時間繪制走向
function draw(){
ctx.clearRect(0, 0, width, height);//每秒清除重新畫
var now = new Date();//獲取當前時間
var hour = now.getHours();//獲取小時數
var minute = now.getMinutes();//獲取分鐘數
var second = now.getSeconds();//獲取秒鐘數
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();//返回之前保存的路徑狀態和屬性
}
draw(); //先執行一次繪畫
setInterval(draw, 1000);//實現動畫
頭條寫代碼很不爽，看代碼更不爽。不過這也沒辦法，大家將就吧。
* {
margin: 0;
padding: 0;
#wrap {
width: 600px;
height: 800px;
background: tomato;
border: 2px solid white;
border-radius: 5%;
//這里不可使用position，會影響畫布的坐標定位
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 5% auto;
font: 20px "微軟雅黑";
text-align: center;
color: white;
transition: 2s;
&:hover {
background: steelblue;
}
h1 {
margin-top: 8%;
}
h2 {
margin-left: 30%;
margin-top: 100%;
}
#wrap-canvas {
position: absolute;
background: skyblue;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
}* {
margin: 0;
padding: 0;
}
* #wrap {
width: 600px;
height: 800px;
background: tomato;
border: 2px solid white;
border-radius: 5%;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 5% auto;
font: 20px "微軟雅黑";
text-align: center;
color: white;
transition: 2s;
}
* #wrap:hover {
background: steelblue;
}
* #wrap h1 {
margin-top: 8%;
}
* #wrap h2 {
margin-left: 30%;
margin-top: 100%;
}
* #wrap #wrap-canvas {
position: absolute;
background: skyblue;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
$(function() {
var canvasNode = document.querySelector("#wrap-canvas");
if(canvasNode.getContext) {
var canvasPen = canvasNode.getContext("2d");
setInterval(function(){
canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);
clockMove();
}, 1000);
clockMove();
function clockMove() {
/**1.外層表圈**/
canvasPen.save();
canvasPen.strokeStyle = "cornsilk";
canvasPen.lineWidth = 10;
canvasPen.lineCap = "round";
//更新源點
canvasPen.translate(250, 250);
//旋轉順時針
canvasPen.rotate(-90 * Math.PI / 180);
canvasPen.beginPath();
/**2.外層表盤**/
canvasPen.save();
canvasPen.strokeStyle = "#FAEBCC";
canvasPen.lineWidth = 15;
canvasPen.beginPath();
//畫圓
canvasPen.arc(0, 0, 200, 0, 360 * Math.PI / 180);
canvasPen.stroke();
canvasPen.restore();
/**3.時針刻度**/
canvasPen.save();
canvasPen.strokeStyle = "green";
for(var i = 0; i < 12; i++) {
//旋轉：每30度轉一針.canvas效果為累加（疊加）不需要帶參數i
canvasPen.rotate(30 * Math.PI / 180);
canvasPen.beginPath();
//指針下端點到150
canvasPen.moveTo(150, 0);
//指針上端點到180
canvasPen.lineTo(180, 0);
canvasPen.stroke();
}
canvasPen.restore();
/**4.分針刻度**/
canvasPen.save();
canvasPen.strokeStyle = "#4CAE4C";
canvasPen.lineWidth = 10;
for(var i = 0; i < 60; i++) {
//旋轉：如果在這里旋轉需要更新if((i+1)%5!=0)
canvasPen.rotate(6 * Math.PI / 180);
//判斷分鐘不旋轉填充
//if(i % 5 != 0) {
if((i + 1) % 5 != 0) {
canvasPen.beginPath();
canvasPen.moveTo(155, 0);
canvasPen.lineTo(170, 0);
canvasPen.stroke();
}
//旋轉：每6度轉一針，第一個畫的度=6，需要在排除時針的0點先計算再進行旋轉。
//canvasPen.rotate(6 * Math.PI / 180);
}
canvasPen.restore();
var canvasDate = new Date();
var seconds = canvasDate.getSeconds();
var minutes = canvasDate.getMinutes() + seconds / 60;
var hours = canvasDate.getHours() + minutes / 60;
//時間判斷
hours > 12 ? hours - 12 : hours;
console.log("小時：", hours);
/**4.時針**/
canvasPen.save();
canvasPen.lineWidth = 20;
canvasPen.strokeStyle = "tomato";
canvasPen.rotate(hours * 30 * Math.PI / 180);
canvasPen.beginPath();
canvasPen.moveTo(0, 0);
canvasPen.lineTo(120, 0);
canvasPen.stroke();
canvasPen.restore();
/**5.分針**/
canvasPen.save();
canvasPen.lineWidth = 15;
canvasPen.strokeStyle = "#E38D13";
canvasPen.rotate(minutes * 6 * Math.PI / 180);
canvasPen.beginPath();
canvasPen.moveTo(0, 0);
canvasPen.lineTo(130, 0);
canvasPen.stroke();
canvasPen.restore();
/**6.秒針**/
canvasPen.save();
canvasPen.lineWidth = 10;
canvasPen.strokeStyle = "#C12E2A";
canvasPen.fillStyle = "#C12E2A";
canvasPen.rotate(seconds * 6 * Math.PI / 180);
canvasPen.beginPath();
canvasPen.moveTo(0, 0);
canvasPen.lineTo(130, 0);
canvasPen.stroke();
//鐘座
canvasPen.beginPath();
canvasPen.arc(0, 0, 20, 0, 360 * Math.PI / 180);
canvasPen.fill();
//畫指針圓環
canvasPen.beginPath();
canvasPen.arc(145, 0, 12, 0, 360 * Math.PI / 180);
canvasPen.stroke();
canvasPen.restore();
canvasPen.restore();
}
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devide-width,initial-scal=1.0,user-scalable=no" />
<title>canvas鐘表組件</title>
</head>
<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/12-canvas-clock.css" />
<body>
<div id="wrap">
<h1>canvas鐘表組件</h1>
<canvas id="wrap-canvas" width="500px" height="500px"></canvas>
<h2>PS：一刀coder</h2>
</div>
</body>
<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/12-canvas-clock.js"></script>
</html>
1234567891011121314151617181920212223canvas
、canvas簡介
? <canvas> 是 HTML5 新增的，一個可以使用腳本(通常為JavaScript)在其中繪制圖像的 HTML 元素。它可以用來制作照片集或者制作簡單(也不是那么簡單)的動畫，甚至可以進行實時視頻處理和渲染。
? 它最初由蘋果內部使用自己MacOS X WebKit推出，供應用程序使用像儀表盤的構件和 Safari 瀏覽器使用。 后來，有人通過Gecko內核的瀏覽器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本網絡應用技術工作組建議為下一代的網絡技術使用該元素。
? Canvas是由HTML代碼配合高度和寬度屬性而定義出的可繪制區域。JavaScript代碼可以訪問該區域，類似于其他通用的二維API，通過一套完整的繪圖函數來動態生成圖形。
? Mozilla 程序從 Gecko 1.8 (Firefox 1.5)開始支持 <canvas>, Internet Explorer 從IE9開始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。
二、Canvas基本使用
2.1 <canvas>元素
<canvas id="tutorial" width="300" height="300"></canvas>
? <canvas>看起來和<img>標簽一樣，只是 <canvas> 只有兩個可選的屬性 width、heigth 屬性，而沒有 src、alt 屬性。
? 如果不給<canvas>設置widht、height屬性時，則默認 width為300、height為150,單位都是px。也可以使用css屬性來設置寬高，但是如寬高屬性和初始比例不一致，他會出現扭曲。所以，建議永遠不要使用css屬性來設置<canvas>的寬高。
###替換內容
? 由于某些較老的瀏覽器（尤其是IE9之前的IE瀏覽器）或者瀏覽器不支持HTML元素<canvas>，在這些瀏覽器上你應該總是能展示替代內容。
? 支持<canvas>的瀏覽器會只渲染<canvas>標簽，而忽略其中的替代內容。不支持 <canvas> 的瀏覽器則 會直接渲染替代內容。
用文本替換：
<canvas> 你的瀏覽器不支持canvas,請升級你的瀏覽器 </canvas>
用 <img> 替換：
<canvas> <img src="./美女.jpg" alt=""> </canvas>
結束標簽</canvas>不可省
與 <img>元素不同，<canvas>元素需要結束標簽(</canvas>)。如果結束標簽不存在，則文檔的其余部分會被認為是替代內容，將不會顯示出來。
2.2 渲染上下文(Thre Rending Context)
? <canvas>會創建一個固定大小的畫布，會公開一個或多個 渲染上下文(畫筆)，使用 渲染上下文來繪制和處理要展示的內容。
? 我們重點研究 2D渲染上下文。 其他的上下文我們暫不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。
var canvas = document.getElementById('tutorial');
//獲得 2d 上下文對象
var ctx = canvas.getContext('2d');
2.3 檢測支持性
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
2.4 代碼模板
<html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//開始代碼
}
draw();
</script>
</html>
2.5 一個簡單的例子
繪制兩個長方形。
<html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
//繪制矩形
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>
</html>
三、繪制形狀
3.1 柵格(grid)和坐標空間
? 如下圖所示，canvas元素默認被網格所覆蓋。通常來說網格中的一個單元相當于canvas元素中的一像素。柵格的起點為左上角（坐標為（0,0））。所有元素的位置都相對于原點來定位。所以圖中藍色方形左上角的坐標為距離左邊（X軸）x像素，距離上邊（Y軸）y像素（坐標為（x,y））。
? 后面我們會涉及到坐標原點的平移、網格的旋轉以及縮放等。
3.2 繪制矩形
? <canvas> 只支持一種原生的 圖形繪制：矩形。所有其他圖形都至少需要生成一種路徑(path)。不過，我們擁有眾多路徑生成的方法讓復雜圖形的繪制成為了可能。
canvast 提供了三種方法繪制矩形：
fillRect(x, y, width, height)
繪制一個填充的矩形
strokeRect(x, y, width, height)
繪制一個矩形的邊框
clearRect(x, y, widh, height)
清除指定的矩形區域，然后這塊區域會變的完全透明。
說明：
? 這3個方法具有相同的參數。
? x, y：指的是矩形的左上角的坐標。(相對于canvas的坐標原點)
? width, height：指的是繪制的矩形的寬和高。
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillRect(10, 10, 100, 50); //繪制矩形,填充的默認顏色為黑色
ctx.strokeRect(10, 70, 100, 50); //繪制矩形邊框
}
draw();
ctx.clearRect(15, 15, 50, 25);
四、繪制路徑(path)
? 圖形的基本元素是路徑。
? 路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。
? 一個路徑，甚至一個子路徑，都是閉合的。
使用路徑繪制圖形需要一些額外的步驟：
創建路徑起始點
調用繪制方法去繪制出路徑
把路徑封閉
一旦路徑生成，通過描邊或填充路徑區域來渲染圖形。
下面是需要用到的方法：
beginPath()
新建一條路徑，路徑一旦創建成功，圖形繪制命令被指向到路徑上生成路徑
moveTo(x, y)
把畫筆移動到指定的坐標(x, y)。相當于設置路徑的起始點坐標。
closePath()
閉合路徑之后，圖形繪制命令又重新指向到上下文中
stroke()
通過線條來繪制圖形輪廓
fill()
通過填充路徑的內容區域生成實心的圖形
4.1 繪制線段
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath(); //新建一條path
ctx.moveTo(50, 50); //把畫筆移動到指定的坐標
ctx.lineTo(200, 50); //繪制一條從當前位置到指定坐標(200, 50)的直線.
//閉合路徑。會拉一條從當前點到path起始點的直線。如果當前點與起始點重合，則什么都不做
ctx.closePath();
ctx.stroke(); //繪制路徑。
}
draw();
4.2 繪制三角形邊框
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath(); //雖然我們只繪制了兩條線段，但是closePath會closePath，仍然是一個3角形
ctx.stroke(); //描邊。stroke不會自動closePath()
}
draw();
4.3 填充三角形
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.fill(); //填充閉合區域。如果path沒有閉合，則fill()會自動閉合路徑。
}
draw();
4 繪制圓弧
有兩個方法可以繪制圓弧：
arc(x, y, r, startAngle, endAngle, anticlockwise):
以(x, y)為圓心，以r為半徑，從 startAngle弧度開始到endAngle弧度結束。anticlosewise是布爾值，true表示逆時針，false表示順時針。(默認是順時針)
注意：
這里的度數都是弧度。
0弧度是指的x軸正方形
radians=(Math.PI/180)*degrees //角度轉換成弧度
arcTo(x1, y1, x2, y2, radius):
根據給定的控制點和半徑畫一段圓弧，最后再以直線連接兩個控制點。
圓弧案例1：
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();
}
draw();
圓弧案例2：
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 50, 40, 0, -Math.PI / 2, true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI, false);
ctx.fill();
}
draw();
圓弧案例3：
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
//參數1、2：控制點1坐標 參數3、4：控制點2坐標 參數4：圓弧半徑
ctx.arcTo(200, 50, 200, 200, 100);
ctx.lineTo(200, 200)
ctx.stroke();
ctx.beginPath();
ctx.rect(50, 50, 10, 10);
ctx.rect(200, 50, 10, 10)
ctx.rect(200, 200, 10, 10)
ctx.fill()
}
draw();
arcTo方法的說明：
? 這個方法可以這樣理解。繪制的弧形是由兩條切線所決定。
? 第 1 條切線：起始點和控制點1決定的直線。
? 第 2 條切線：控制點1 和控制點2決定的直線。
? 其實繪制的圓弧就是與這兩條直線相切的圓弧。
4.5 繪制貝塞爾曲線
4.5.1 什么是貝塞爾曲線
? 貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用于二維圖形應用程序的數學曲線。
? 一般的矢量圖形軟件通過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。
? 貝塞爾曲線是計算機圖形學中相當重要的參數曲線，在一些比較成熟的位圖軟件中也有貝塞爾曲線工具如PhotoShop等。在Flash4中還沒有完整的曲線工具，而在Flash5里面已經提供出貝塞爾曲線工具。
? 貝塞爾曲線于1962，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發表，他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由Paul de Casteljau于1959年運用de Casteljau演算法開發，以穩定數值的方法求出貝茲曲線。
一次貝塞爾曲線(線性貝塞爾曲線)
? 一次貝塞爾曲線其實是一條直線。
二次貝塞爾曲線
三次貝塞爾曲線
4.5.2 繪制貝塞爾曲線
繪制二次貝塞爾曲線
quadraticCurveTo(cp1x, cp1y, x, y):
說明：
? 參數1和2：控制點坐標
? 參數3和4：結束點坐標
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 200); //起始點
var cp1x = 40, cp1y = 100; //控制點
var x = 200, y = 200; // 結束點
//繪制二次貝塞爾曲線
ctx.quadraticCurveTo(cp1x, cp1y, x, y);
ctx.stroke();
ctx.beginPath();
ctx.rect(10, 200, 10, 10);
ctx.rect(cp1x, cp1y, 10, 10);
ctx.rect(x, y, 10, 10);
ctx.fill();
}
draw();
繪制三次貝塞爾曲線
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：
說明：
? 參數1和2：控制點1的坐標
? 參數3和4：控制點2的坐標
? 參數5和6：結束點的坐標
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(40, 200); //起始點
var cp1x = 20, cp1y = 100; //控制點1
var cp2x = 100, cp2y = 120; //控制點2
var x = 200, y = 200; // 結束點
//繪制二次貝塞爾曲線
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
ctx.beginPath();
ctx.rect(40, 200, 10, 10);
ctx.rect(cp1x, cp1y, 10, 10);
ctx.rect(cp2x, cp2y, 10, 10);
ctx.rect(x, y, 10, 10);
ctx.fill();
}
draw();
五、添加樣式和顏色
? 在前面的繪制矩形章節中，只用到了默認的線條和顏色。
? 如果想要給圖形上色，有兩個重要的屬性可以做到。
fillStyle = color
設置圖形的填充顏色
strokeStyle = color
設置圖形輪廓的顏色
備注：
1. `color` 可以是表示 `css` 顏色值的字符串、漸變對象或者圖案對象。
2. 默認情況下，線條和填充顏色都是黑色。
3. 一旦您設置了 `strokeStyle` 或者 `fillStyle` 的值，那么這個新值就會成為新繪制的圖形的默認值。如果你要給每個圖形上不同的顏色，你需要重新設置 `fillStyle` 或 `strokeStyle` 的值。
1.fillStyle
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
Math.floor(255 - 42.5 * j) + ',0)';
ctx.fillRect(j * 50, i * 50, 50, 50);
}
}
}
draw();
2.strokeStyle
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
ctx.strokeRect(j * 50, i * 50, 40, 40);
}
}
}
draw();
/**
返回隨機的 [from, to] 之間的整數(包括from，也包括to)
*/
function randomInt(from, to){
return parseInt(Math.random() * (to - from + 1) + from);
}
</script>
3.Transparency(透明度)
globalAlpha = transparencyValue
? 這個屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認是 1.0。
? globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時候相當高效。不過，我認為使用rgba()設置透明度更加好一些。
line style
1. lineWidth = value
線寬。只能是正值。默認是1.0。
起始點和終點的連線為中心，上下各占線寬的一半
ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 10); ctx.lineWidth = 10; ctx.stroke(); ctx.beginPath(); ctx.moveTo(110, 10); ctx.lineTo(160, 10) ctx.lineWidth = 20; ctx.stroke()
###2. lineCap = type
線條末端樣式。
共有3個值：
butt：線段末端以方形結束
round：線段末端以圓形結束
square：線段末端以方形結束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區域。
var lineCaps = ["butt", "round", "square"];
for (var i = 0; i < 3; i++){
ctx.beginPath();
ctx.moveTo(20 + 30 * i, 30);
ctx.lineTo(20 + 30 * i, 100);
ctx.lineWidth = 20;
ctx.lineCap = lineCaps[i];
ctx.stroke();
}
ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(300, 30);
ctx.moveTo(0, 100);
ctx.lineTo(300, 100)
ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.stroke();
3. lineJoin = type
同一個path內，設定線條與線條間接合處的樣式。
共有3個值round, bevel 和 miter：
round
通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。 圓角的半徑是線段的寬度。
bevel
在相連部分的末端填充一個額外的以三角形為底的區域， 每個部分都有各自獨立的矩形拐角。
miter(默認)
通過延伸相連部分的外邊緣，使其相交于一點，形成一個額外的菱形區域。
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 20;
for (var i = 0; i < lineJoin.length; i++){
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(50, 50 + i * 50);
ctx.lineTo(100, 100 + i * 50);
ctx.lineTo(150, 50 + i * 50);
ctx.lineTo(200, 100 + i * 50);
ctx.lineTo(250, 50 + i * 50);
ctx.stroke();
}
}
draw();
4. 虛線
用 setLineDash 方法和 lineDashOffset 屬性來制定虛線樣式. setLineDash 方法接受一個數組，來指定線段與間隙的交替；lineDashOffset屬性設置起始偏移量.
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.setLineDash([20, 5]); // [實線長度, 間隙長度]
ctx.lineDashOffset = -0;
ctx.strokeRect(50, 50, 210, 210);
}
draw();
備注：
? getLineDash():返回一個包含當前虛線樣式，長度為非負偶數的數組。
六、繪制文本
繪制文本的兩個方法
canvas 提供了兩種方法來渲染文本:
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，繪制的最大寬度是可選的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置繪制文本邊框，繪制的最大寬度是可選的.
var ctx;
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
ctx = canvas.getContext("2d");
ctx.font = "100px sans-serif"
ctx.fillText("天若有情", 10, 100);
ctx.strokeText("天若有情", 10, 200)
}
draw();
給文本添加樣式
font = value
當前我們用來繪制文本的樣式。這個字符串使用和 CSS font屬性相同的語法. 默認的字體是 10px sans-serif。
textAlign = value
文本對齊選項. 可選的值包括：start, end, left, right or center. 默認值是 start。
textBaseline = value
基線對齊選項，可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認值是 alphabetic。
direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默認值是 inherit。
七、繪制圖片
? 我們也可以在canvas上直接繪制圖片。
7.1 由零開始創建圖片
創建<img>元素
var img = new Image(); // 創建一個<img>元素 img.src = 'myImage.png'; // 設置圖片源地址
腳本執行后圖片開始裝載
繪制img
//參數1：要繪制的img 參數2、3：繪制的img在canvas中的坐標
ctx.drawImage(img,0,0);
注意：
? 考慮到圖片是從網絡加載，如果 drawImage 的時候圖片還沒有完全加載完成，則什么都不做，個別瀏覽器會拋異常。所以我們應該保證在 img 繪制完成之后再 drawImage。
var img = new Image(); // 創建img元素
img.onload = function(){
ctx.drawImage(img, 0, 0)
}
img.src = 'myImage.png'; // 設置圖片源地址
7.2 繪制 img 標簽元素中的圖片
? img 可以 new 也可以來源于我們頁面的 <img>標簽
<img src="./美女.jpg" alt="" width="300"><br>
<canvas id="tutorial" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
var img = document.querySelector("img");
ctx.drawImage(img, 0, 0);
}
document.querySelector("img").onclick = function (){
draw();
}
</script>
第一張圖片就是頁面中的<img>標簽
7.3 縮放圖片
drawImage() 也可以再添加兩個參數：
? drawImage(image, x, y, width, height)
? 這個方法多了2個參數：width 和 height，這兩個參數用來控制 當像canvas畫入時應該縮放的大小。
ctx.drawImage(img, 0, 0, 400, 200)
7.4 切片(slice)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
? 第一個參數和其它的是相同的，都是一個圖像或者另一個 canvas 的引用。
其他8個參數：
? 前4個是定義圖像源的切片位置和大小，
? 后4個則是定義切片的目標顯示位置和大小。
八、狀態的保存和恢復
Saving and restoring state是繪制復雜圖形時必不可少的操作。
save()和restore()
? save 和 restore 方法是用來保存和恢復 canvas 狀態的，都沒有參數。
? Canvas 的狀態就是當前畫面應用的所有樣式和變形的一個快照。
關于 save()
Canvas狀態存儲在棧中，每當save()方法被調用后，當前的狀態就被推送到棧中保存。一個繪畫狀態包括：
當前應用的變形（即移動，旋轉和縮放）
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
當前的裁切路徑（clipping path）
?
可以調用任意多次 save方法。(類似數組的push())
關于restore()
每一次調用 restore 方法，上一個保存的狀態就從棧中彈出，所有設定都恢復。(類似數組的pop())
var ctx;
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150); // 使用默認設置繪制一個矩形
ctx.save(); // 保存默認狀態
ctx.fillStyle = 'red' // 在原有配置基礎上對顏色做改變
ctx.fillRect(15, 15, 120, 120); // 使用新的設置繪制一個矩形
ctx.save(); // 保存當前狀態
ctx.fillStyle = '#FFF' // 再次改變顏色配置
ctx.fillRect(30, 30, 90, 90); // 使用新的配置繪制一個矩形
ctx.restore(); // 重新加載之前的顏色狀態
ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置繪制一個矩形
ctx.restore(); // 加載默認顏色配置
ctx.fillRect(60, 60, 30, 30); // 使用加載的配置繪制一個矩形
}
draw();
九、變形
9.1 translate
translate(x, y)
? 用來移動 canvas 的原點到指定的位置
? translate方法接受兩個參數。x 是左右偏移量，y 是上下偏移量，如右圖所示。
在做變形之前先保存狀態是一個良好的習慣。大多數情況下，調用 restore 方法比手動恢復原先的狀態要簡單得多。又如果你是在一個循環中做位移但沒有保存和恢復canvas 的狀態，很可能到最后會發現怎么有些東西不見了，那是因為它很可能已經超出 canvas 范圍以外了。
? 注意：translate移動的是canvas的坐標原點。(坐標變換)
var ctx;
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.save(); //保存坐原點平移之前的狀態
ctx.translate(100, 100);
ctx.strokeRect(0, 0, 100, 100)
ctx.restore(); //恢復到最初狀態
ctx.translate(220, 220);
ctx.fillRect(0, 0, 100, 100)
}
draw();
9.2 rotate
rotate(angle)
? 旋轉坐標軸。
? 這個方法只接受一個參數：旋轉的角度(angle)，它是順時針方向的，以弧度為單位的值。
? 旋轉的中心是坐標原點。
var ctx;
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
ctx.save();
ctx.translate(0, 0);
ctx.fillRect(0, 0, 50, 50)
ctx.restore();
}
draw();
9.3 scale
scale(x, y)
? 我們用它來增減圖形在 canvas 中的像素數目，對形狀，位圖進行縮小或者放大。
? scale方法接受兩個參數。x,y分別是橫軸和縱軸的縮放因子，它們都必須是正值。值比 1.0 小表示縮 小，比 1.0 大則表示放大，值為 1.0 時什么效果都沒有。
? 默認情況下，canvas 的 1 單位就是 1 個像素。舉例說，如果我們設置縮放因子是 0.5，1 個單位就變成對應 0.5 個像素，這樣繪制出來的形狀就會是原先的一半。同理，設置為 2.0 時，1 個單位就對應變成了 2 像素，繪制的結果就是圖形放大了 2 倍。
9.4 transform(變形矩陣)
transform(a, b, c, d, e, f)
a (m11)
? Horizontal scaling.
b (m12)
? Horizontal skewing.
c (m21)
? Vertical skewing.
d (m22)
? Vertical scaling.
e (dx)
? Horizontal moving.
f (dy)
? Vertical moving.
var ctx;
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.transform(1, 1, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
}
draw();
十、合成
? 在前面的所有例子中、，我們總是將一個圖形畫在另一個之上，對于其他更多的情況，僅僅這樣是遠遠不夠的。比如，對合成的圖形來說，繪制順序會有限制。不過，我們可以利用 globalCompositeOperation 屬性來改變這種狀況。
globalCompositeOperation = type
var ctx;
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 200, 200);
ctx.globalCompositeOperation = "source-over"; //全局合成操作
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 200, 200);
}
draw();
注：下面的展示中，藍色是原有的，紅色是新的。
type `是下面 13 種字符串值之一：
##1. source-over(default)
這是默認設置，新圖像會覆蓋在原有圖像。
##2. source-in
僅僅會出現新圖像與原來圖像重疊的部分，其他區域都變成透明的。(包括其他的老圖像區域也會透明)
##3. source-out
僅僅顯示新圖像與老圖像沒有重疊的部分，其余部分全部透明。(老圖像也不顯示)
##4. source-atop
新圖像僅僅顯示與老圖像重疊區域。老圖像仍然可以顯示。
##5. destination-over
新圖像會在老圖像的下面。
##6. destination-in
僅僅新老圖像重疊部分的老圖像被顯示，其他區域全部透明。
##7. destination-out
僅僅老圖像與新圖像沒有重疊的部分。 注意顯示的是老圖像的部分區域。
##8. destination-atop
老圖像僅僅僅僅顯示重疊部分，新圖像會顯示在老圖像的下面。
##9. lighter
新老圖像都顯示，但是重疊區域的顏色做加處理
##10. darken
保留重疊部分最黑的像素。(每個顏色位進行比較，得到最小的)
blue: #0000ff
red: #ff0000
所以重疊部分的顏色：#000000
##11. lighten
保證重疊部分最量的像素。(每個顏色位進行比較，得到最大的)
blue: #0000ff
red: #ff0000
所以重疊部分的顏色：#ff00ff
##12. xor
重疊部分會變成透明
##13. copy
只有新圖像會被保留，其余的全部被清除(邊透明)
#十一、裁剪路徑
clip()
? 把已經創建的路徑轉換成裁剪路徑。
? 裁剪路徑的作用是遮罩。只顯示裁剪路徑內的區域，裁剪路徑外的區域會被隱藏。
? 注意：clip()只能遮罩在這個方法調用之后繪制的圖像，如果是clip()方法調用之前繪制的圖像，則無法實現遮罩。
var ctx;
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(20,20, 100, 0, Math.PI * 2);
ctx.clip();
ctx.fillStyle = "pink";
ctx.fillRect(20, 20, 100,100);
}
draw();
十二、動畫
動畫的基本步驟
清空canvas
再繪制每一幀動畫之前，需要清空所有。清空所有最簡單的做法就是clearRect()方法
保存canvas狀態
如果在繪制的過程中會更改canvas的狀態(顏色、移動了坐標原點等),又在繪制每一幀時都是原始狀態的話，則最好保存下canvas的狀態
繪制動畫圖形
這一步才是真正的繪制動畫幀
恢復canvas狀態
如果你前面保存了canvas狀態，則應該在繪制完成一幀之后恢復canvas狀態。
控制動畫
我們可用通過canvas的方法或者自定義的方法把圖像會知道到canvas上。正常情況，我們能看到繪制的結果是在腳本執行結束之后。例如，我們不可能在一個 for 循環內部完成動畫。
也就是，為了執行動畫，我們需要一些可以定時執行重繪的方法。
一般用到下面三個方法：
setInterval()
setTimeout()
requestAnimationFrame()
##案例1：太陽系
let sun;
let earth;
let moon;
let ctx;
function init(){
sun = new Image();
earth = new Image();
moon = new Image();
sun.src = "sun.png";
earth.src = "earth.png";
moon.src = "moon.png";
let canvas = document.querySelector("#solar");
ctx = canvas.getContext("2d");
sun.onload = function (){
draw()
}
}
init();
function draw(){
ctx.clearRect(0, 0, 300, 300); //清空所有的內容
/*繪制 太陽*/
ctx.drawImage(sun, 0, 0, 300, 300);
ctx.save();
ctx.translate(150, 150);
//繪制earth軌道
ctx.beginPath();
ctx.strokeStyle = "rgba(255,255,0,0.5)";
ctx.arc(0, 0, 100, 0, 2 * Math.PI)
ctx.stroke()
let time = new Date();
//繪制地球
ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
ctx.translate(100, 0);
ctx.drawImage(earth, -12, -12)
//繪制月球軌道
ctx.beginPath();
ctx.strokeStyle = "rgba(255,255,255,.3)";
ctx.arc(0, 0, 40, 0, 2 * Math.PI);
ctx.stroke();
//繪制月球
ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
ctx.translate(40, 0);
ctx.drawImage(moon, -3.5, -3.5);
ctx.restore();
requestAnimationFrame(draw);
}
##案例2：模擬時鐘
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
