canvas簡介
- canvas標籤是用來繪製圖像的
- canvas本身沒有繪畫的能力,僅僅是圖形的容器,相當於一塊畫板
- 必須要使用腳本完成繪製:JS
canvas繪畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<!-- 1、定義畫板 -->
<canvas id="canvas" width="400" height="300"></canvas>
<script>
// 2、獲取畫板
var canvas = document.getElementById("canvas");
///3、鋪上畫紙或畫布,獲取繪畫環境
var cv = canvas.getContext("2d");
// 4、開啓一條路徑或重置當前路徑,相當於擡筆,表示準備開始畫
cv.beginPath();
// 5、指定路徑(畫筆)起點: 畫布.moveTo(X座標,Y座標);
cv.moveTo(50, 50);
// 6、指定路徑(畫筆)到達位置: 畫布.lineTo(X座標,Y座標);
cv.lineTo(350, 50);
// 7、繪製當前路徑(畫筆),默認爲黑色
cv.stroke();
</script>
</body>
</html>
畫筆寬度和顏色
canvas.lineWidth = 數值;
:定義畫筆寬度(粗細),值爲數值類型,單位爲像素canvas.strokeStyle = “顏色值”
:定義畫筆(路徑)顏色
多個到達點及開啓多條路徑
canvas.lineTo(X座標, Y座標);
:定義一個新到達點,然後從上一個點到該點畫一條線條canvas.beginPath();
:開啓一條路徑,或重置當前路徑;相當於擡筆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<!-- 1、定義畫板 -->
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
cv.beginPath();
cv.lineWidth = 10;
cv.strokeStyle = "red";
cv.moveTo(20, 20);
cv.lineTo(200, 100);
cv.lineTo(380, 20);
cv.stroke();
// ------------------------------------------
// 開始新的路徑
cv.beginPath();
cv.lineWidth = 20;
cv.strokeStyle = "green";
cv.moveTo(20, 170);
cv.lineTo(200, 250);
cv.lineTo(380, 170);
cv.stroke();
</script>
</body>
</html>
閉合路徑和填充路徑
canvas.closePath();
:閉合路徑,從當前點到開始點的路徑canvas.fillStyle = “顏色值”;
:定義填充顏色canvas.fill();
:填充當前路徑,默認爲黑色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<!-- 1、定義畫板 -->
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
cv.beginPath();
cv.lineWidth = 10;
cv.strokeStyle = "red";
cv.moveTo(20, 20);
cv.lineTo(200, 100);
cv.lineTo(380, 20);
// 不能指定路徑到達起點來關閉路徑,不是正常的關閉路徑
// cv.lineTo(20, 20);
// 創建閉合路徑:從當前點到開始點的路徑
cv.closePath();
// 繪製當前路徑
cv.stroke();
// 定義填充顏色
cv.fillStyle = "orange";
// 填充當前路徑,默認爲黑色
cv.fill();
</script>
</body>
</html>
繪製貝塞爾曲線
canvas.quadraticCurveto(cpx, cpy, x, y);
:二次貝塞爾曲線,只有一個控制點canvas.bezierCurveto(cpx1, cpy1, cpx2, cpy2, x, y);
:三次貝塞爾曲線,有兩個控制點- cpx,cpy:控制點
- x,y:到達點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<!-- 1、定義畫板 -->
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
cv.beginPath();
cv.moveTo(10, 100); //貝塞爾曲線的起始點
// 二次貝塞爾曲線:畫布.quadraticCurveTo(cpx, cpy, x, y);
// cpx,cpy:控制點
// x,y:到達點
// 只有一個控制點
// cv.quadraticCurveTo(200, 300, 300, 100);
// 三次貝塞爾曲線:畫布.bezierCurveTo(cpx1, cpy2, cpx2, cpy2, x, y);
// cpx,cpy:控制點
// x,y:到達點
// 有兩個控制點
cv.bezierCurveTo(150, 200, 280, 50, 390, 100);
cv.stroke();
</script>
</body>
</html>
畫布寬高設置及生產圖片
canvas
:寬高應直接在頭標籤中設置,單位爲像素,默認爲寬300px,高爲150px;在css中設置寬高,會把寬爲300px,高爲150px的畫布進行拉伸,所以會變形canvas
:最終會生成一張圖片,可以通過右鍵另存爲圖片;可以通過css來定義樣式,但不會生成到圖片中
繪製空心矩形
-
canvas.rect(左上角x座標,左上角y座標,矩形寬度,矩形高度)
:創建矩形路徑,需使用stroke()
繪製當前路徑 -
canvas.strokeRect(左上角x座標,左上角y座標,矩形寬度,矩形高度)
:創建並繪製矩形路徑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
// 方法1;創建矩形路徑,再繪製當前路徑
// 創建矩形路徑:畫布.rect(左上角x座標,左上角y座標,矩形寬度,矩形高度)
// cv.rect(50, 50, 150, 100);
// 繪製當前路徑
// cv.stroke();
// 方法2:創建並繪製矩形路徑
// 創建矩形路徑:畫布.strokeRect(左上角x座標,左上角y座標,矩形寬度,矩形高度)
cv.strokeRect(50, 50, 250, 100);
</script>
</body>
</html>
繪製填充矩形及清空矩形像素
canvas.rect(左上角x座標,左上角y座標,矩形寬度,矩形高度)
:創建矩形路徑,需使用fill()
填充當前路徑canvas.fillRect(左上角x座標,左上角y座標,矩形寬度,矩形高度);
:創建並填充矩形路徑canvas.clearRect(左上角x座標,左上角y座標,矩形寬度,矩形高度);
:清空給定矩形內的指定像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
// 指定填充顏色
cv.fillStyle = "red";
// 方法1;創建矩形路徑,再填充當前路徑
// 創建矩形路徑:畫布.rect(左上角x座標,左上角y座標,矩形寬度,矩形高度)
// cv.rect(50, 50, 150, 100);
// 填充當前路徑,默認爲黑色
// cv.fill();
// 方法2:創建並填充矩形路徑
// 創建矩形路徑:畫布.fillRect(左上角x座標,左上角y座標,矩形寬度,矩形高度)
cv.fillRect(50, 50, 250, 100);
// 清空給定矩形內的指定像素
// 畫布.clearRect(左上角x座標,左上角y座標,矩形寬度,矩形高度)
cv.clearRect(100, 100, 50, 45);
</script>
</body>
</html>
繪製圓形
canvas.arc(圓心x座標,圓心y座標,半徑, 起始弧度,結束弧度, 繪製方向(可選));
:創建圓形、圓弧路徑,再使用stroke()
繪製或使用fill()
填充當前路徑- 起始弧度:3點鐘方向爲0度
- 繪製方向:可選,默認爲false;false=順時針,true=逆時針
角度和弧度換算
- 圓周弧度 = 2π, 360度 = 2π弧度, 1度 = 2π/360 = π/180弧度
- π在js中用Math.PI表示
- 1角度 = Math.PI/180弧度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
// 指定填充顏色
cv.fillStyle = "#00ff00";
cv.lineWidth = 5;
// 創建圓形路徑,再繪製或填充當前路徑
// 創建矩形路徑:畫布.arc(圓心x座標,圓心y座標,半徑, 起始弧度,結束弧度, 繪製方向(可選));
// 角度和弧度換算
// 圓周弧度 = 2π, 360度 = 2π弧度, 1度 = 2π/360 = π/180弧度
// π在js中用Math.PI表示
// 1角度 = Math.PI/180弧度
cv.arc(200, 150, 100, 0, 2*Math.PI);
cv.stroke();
cv.fill();
</script>
</body>
</html>
繪製圓弧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
cv.beginPath(); //x軸
cv.moveTo(0, 150);
cv.lineTo(400, 150);
cv.stroke();
cv.beginPath(); //y軸
cv.moveTo(200, 0);
cv.lineTo(200, 300);
cv.stroke();
// 繪製圓弧
cv.beginPath();
cv.arc(200, 150, 100, 0, 90*Math.PI/180, true);
// cv.arc(200, 150, 100,-90*Math.PI/180, 0);
cv.stroke();
</script>
</body>
</html>
繪製扇形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
cv.fillStyle = "#00ff00";
cv.strokeStyle = "#ff0000";
cv.beginPath(); //x軸
cv.moveTo(0, 150);
cv.lineTo(400, 150);
cv.stroke();
cv.beginPath(); //y軸
cv.moveTo(200, 0);
cv.lineTo(200, 300);
cv.stroke();
// 繪製閉合弧形
// cv.beginPath();
// cv.arc(200, 150, 100, 0, 90*Math.PI/180);
// cv.closePath();
// cv.stroke();
// cv.fill();
// 繪製扇形
cv.beginPath();
cv.moveTo(200, 150);
cv.arc(200, 150, 100, 0, 90*Math.PI/180);
cv.closePath();
cv.stroke();
cv.fill();
</script>
</body>
</html>
寫入文字
convas.font = “字體樣式 字體粗細 字號/行高 字體系列”;
:設置文本屬性畫布.fillText(“要寫入的文字”, X座標, Y座標, 最大文本寬度(可選));
:實心文字convas.strokeText(“要寫入的文字”, X座標, Y座標, 最大文本寬度(可選));
:空心文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
cv.fillStyle = "#00ff00";
cv.strokeStyle = "#ff0000";
// 1、設置文本屬性
// 畫布.font = "字體樣式 字體粗細 字號/行高 字體系列";
cv.font = "italic 700 50px/100px 宋體";
// 2、寫入文字
// a、實心文字:畫布.fillText("要寫入的文字", X座標, Y座標, 最大文本寬度(可選));
cv.fillText("苦澀2020", 50, 100);
// b、空心文字:畫布.strokeText("要寫入的文字", X座標, Y座標, 最大文本寬度(可選));
cv.strokeText("苦澀2020", 50, 200);
</script>
</body>
</html>
繪製和定位圖像
canvas.drawImage(圖像對象,X座標,Y座標);
:在畫布上繪製和定位圖像;爲了保險,通常應讓圖像加載完成後,再執行寫入畫布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
cv.fillStyle = "#00ff00";
cv.strokeStyle = "#ff0000";
// 1、創建圖像資源
var pt = new Image();
pt.src = "./img/1.jpg";
// 2、在畫布上繪製和定位圖像 畫布.drawImage(圖像對象,X座標,Y座標);
// 爲了保險,通常應讓圖像加載完成後,再執行寫入畫布
pt.onload = function(){
cv.drawImage(pt, 50, 50);
};
</script>
</body>
</html>
設置和剪切圖像
convas.drawImage(圖像對象,X座標,Y座標,圖像寬度,圖像高度);
:在畫布上繪製和定位圖像,並設置圖像尺寸canvas.drawImage(圖像對象,剪切圖像X座標,剪切圖像Y座標,剪切圖像寬度,剪切圖像高度,X座標,Y座標,圖像寬度,圖像高度);
:在畫布上繪製和定位剪切的部分圖像,並設置圖像尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
cv.fillStyle = "#00ff00";
cv.strokeStyle = "#ff0000";
// 1、創建圖像資源
var pt = new Image();
pt.src = "./img/1.jpg";
// 2、在畫布上繪製和定位圖像,並設置圖像尺寸
// 畫布.drawImage(圖像對象,X座標,Y座標,圖像寬度,圖像高度);
// 爲了保險,通常應讓圖像加載完成後,再執行寫入畫布
// pt.onload = function(){
// cv.drawImage(pt, 50, 50, 150, 200);
// };
// 3、在畫布上繪製和定位剪切的部分圖像,並設置圖像尺寸
// 畫布.drawImage(圖像對象,剪切圖像X座標,剪切圖像Y座標,剪切圖像寬度,剪切圖像高度,X座標,Y座標,圖像寬度,圖像高度);
// 爲了保險,通常應讓圖像加載完成後,再執行寫入畫布
pt.onload = function(){
cv.drawImage(pt, 0, 200, 200, 100, 50, 50, 300, 150);
};
</script>
</body>
</html>
填充操作
canvas.createPattern(image, “repeat | repeat-x | repeat-y | no-repeat”);
:在指定的方向上重複指定的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
// 創建圖像資源
var Iamp = new Image();
Iamp.src = "./img/1.jpg";
// createPattern(): 在指定的方向內重複指定的元素
// 語法:畫布.createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");
Iamp.onload = function(){
// 創建矩形路徑
cv.rect(0, 0, 200, 150);
cv.fillStyle = cv.createPattern(Iamp, "repeat");
cv.fill();
}
</script>
</body>
</html>
實戰畫板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="./reset.css"> -->
<style type="text/css">
*{margin: 0; padding: 0;}
#box{width: 800px; height: 440px; margin: 50px auto; position: relative;}
#zz{
width: 800px; height: 400px;
position: absolute; top: 0; left: 0;
background-color: rgba(0, 0, 0, 0);
display: none;
}
.huabi{height: 40px; vertical-align: middle;}
.huabi li{
height: 40px; float: left;
margin-right: 20px;
list-style-type:none;
}
.huabi li span{
line-height: 40px; float: left;
display: block; margin-right: 10px;
}
.huabi li input{
width: 80px; height: 30px;
float: left; display: block;
}
.huabi li p{
width:80px; height:1px; float:left;
background:#000000;
margin: 10px 0 auto 10px;
}
.huabi li button{
width: 70px; height: 33px;
float: left; margin-right: 10px;
}
</style>
</head>
<body>
<div id="box">
<!-- 定義畫板 -->
<canvas id="canvas" width="800" height="400" style="background-color:#999999"></canvas>
<div id="zz"></div>
<ul class="huabi">
<li>
<span>畫筆顏色</span>
<input type="color" id="cvColor" value="#000000">
</li>
<li>
<span>畫筆粗細</span>
<input type="range" id="cvRange" value="1" min="1" max="30">
<p id="bi"></p>
</li>
<li>
<span>畫布顏色</span>
<input type="color" id="bgColor" value="#999999">
</li>
<li>
<button id="clear">清空畫布</button>
<button id="eraser">橡皮擦</button>
</li>
</ul>
</div>
<script>
// 獲取畫板,獲取畫布環境
var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d");
// 畫板添加鼠標點擊事件
canvas.onmousedown = function(e){
// 獲取鼠標相對於畫板內的位置
var s_left = e.offsetX;
var s_top = e.offsetY;
// document.title = s_left + " | " + s_top;
// 開啓路徑
cv.beginPath();
// 定義畫筆開始位置;將鼠標點擊的位置作爲新畫筆開始的位置
cv.moveTo(s_left, s_top);
// 畫板內鼠標移動事件
canvas.onmousemove = function(event){
// 獲取鼠標在畫板內移動的位置
var n_left = event.offsetX;
var n_top = event.offsetY;
document.title = n_left + " | " + n_top;
// 把路徑畫到當前鼠標的位置
cv.lineTo(n_left, n_top);
// 開始繪畫
cv.stroke();
};
};
// 鼠標鬆開事件,取消canvas上的鼠標移動事件
canvas.onmouseup = function(){
canvas.onmousemove = null;
};
// 改變畫筆顏色
document.getElementById("cvColor").onchange = function(){
cv.strokeStyle = this.value;
document.getElementById("bi").style.background = cv.strokeStyle;
}
// 改變畫筆粗細
document.getElementById("cvRange").onchange = function(){
cv.lineWidth = this.value;
document.getElementById("bi").style.height = this.value+"px";
document.getElementById("bi").style.background = cv.strokeStyle;
}
// 改變畫布顏色
document.getElementById("bgColor").onchange = function(){
canvas.style.backgroundColor = this.value;
}
// 清空繪畫
document.getElementById("clear").onclick = function(){
cv.clearRect(0, 0, canvas.width, canvas.height);
}
// 橡皮擦功能
var abc = 1;
document.getElementById("eraser").onclick = function(){
// 獲取遮罩層
var zz = document.getElementById("zz");
// 1:橡皮擦功能
if(abc == 1){
// 把遮罩層顯示出來
zz.style.display = "block";
// 文字修改成繪製
this.innerText = "繪製";
abc = 0;
// 遮罩層添加鼠標點擊事件
zz.onmousedown = function(){
// 畫板內鼠標移動事件
zz.onmousemove = function(event){
// 獲取鼠標在畫板內移動的位置
var m_left = event.offsetX;
var m_top = event.offsetY;
// document.title = m_left + " | " + m_top;
// 清空畫布上對應位置的像素
var bi = document.getElementById("cvRange").value;
console.log(bi);
cv.clearRect(m_left, m_top, bi, bi);
};
};
// 鼠標鬆開事件,取消遮罩層上的鼠標移動事件
zz.onmouseup = function(){
zz.onmousemove = null;
};
}else{
// 隱藏遮罩層
zz.style.display = "none";
// 文字修改成繪製
this.innerText = "橡皮擦";
abc = 1;
};
};
</script>
</body>
</html>