在小編接觸的項(xiàng)目中,用戶提出了能不能實(shí)現(xiàn)一個(gè)平滑的曲線效果,那么今天就根據(jù)這個(gè)問(wèn)題我們來(lái)說(shuō)說(shuō):“在html5中使用canvas畫板實(shí)現(xiàn)平滑曲線的案例分享 !”這方面的相關(guān)內(nèi)容吧!
功能需求
項(xiàng)目需求:需要實(shí)現(xiàn)一個(gè)可以自由書寫的小畫板
簡(jiǎn)單實(shí)現(xiàn)
對(duì)于熟悉canvas的同學(xué)來(lái)說(shuō),這個(gè)需求很簡(jiǎn)單,大致邏輯如下:
1)監(jiān)聽(tīng)事件pointerdown,pointermove,pointerup
2)標(biāo)記是否拖拽畫線模式變量 isDrawing,在down事件時(shí)置為true,up的時(shí)候置為false
3)使用canvas的api,設(shè)置線條樣式,調(diào)用繪制線條接口lineTo方法
短短幾十行代碼就能實(shí)現(xiàn):
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<style>
canvas {
border: 1px solid #ccc
}
body {
margin: 0;
}
</style>
</head>
<body style="overflow: hidden;background-color: rgb(250, 250, 250);touch-action: none;">
<canvas id="c" width="1920" height="1080"></canvas>
<script>
var el = document.getElementById('c');
var ctx = el.getContext('2d');
//設(shè)置繪制線條樣式
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
var isDrawing;//標(biāo)記是否要繪制
//存儲(chǔ)坐標(biāo)點(diǎn)
let lastX, lastY;
document.body.onpointerdown = function (e) {
console.log('pointerdown');
isDrawing = true;
lastX = e.clientX;
lastY = e.clientY;
};
document.body.onpointermove = function (e) {
console.log('pointermove');
if (isDrawing) {
draw(e.clientX, e.clientY, lastX, lastY);
}
lastX = e.clientX, lastY = e.clientY;
};
document.body.onpointerup = function (e) {
if (isDrawing) {
draw(e.clientX, e.clientY, lastX, lastY);
}
lastX = e.clientX, lastY = e.clientY;
isDrawing = false;
};
function draw(x, y, lastX, lastY) {
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
}
</script>
</body>
</html>
實(shí)現(xiàn)效果如下圖:
以上就簡(jiǎn)單的實(shí)現(xiàn)了畫板功能,如果要求不高的用戶可以使用,但一旦遇到有點(diǎn)要求的用戶就無(wú)法交付這種產(chǎn)品,仔細(xì)看是線條折線感太強(qiáng)。
為什么會(huì)有折線感呢?
主要原因:
我們調(diào)用的api方法lineTo是兩點(diǎn)連線也就是直線
瀏覽器對(duì)鼠標(biāo)事件mousemove的采集是有采集頻率的,并不是每個(gè)鼠標(biāo)移動(dòng)經(jīng)過(guò)的每一個(gè)像素點(diǎn)都會(huì)觸發(fā)事件。
當(dāng)鼠標(biāo)移動(dòng)的越快,那么兩點(diǎn)之間的間隔就越遠(yuǎn),那么折線感就更明顯。
如何能繪制平滑的曲線?
canvas提供的api中是有現(xiàn)成接口的,貝塞爾系列的接口就能滿足我們的要求,接下來(lái)我們講一下使用二次貝塞爾曲線繪制平滑曲線。
quadraticCurveTo(cpx,cpy,x,y)
二次貝塞爾曲線接口需要四個(gè)參數(shù),cpx,cpy是曲線的控制點(diǎn),x,y是曲線終點(diǎn)。
有人問(wèn)那曲線的起點(diǎn)在哪里?其實(shí)曲線的起點(diǎn)取決于上一操作狀態(tài),可以是moveTo的位置,或者是lineTo的位置,或者是貝塞爾的終點(diǎn)。
那么怎么調(diào)用quadraticCurveTo,參數(shù)怎么傳呢?
我們需要找出關(guān)鍵位置,直接用例子告訴大家吧
1)假如我們用鼠標(biāo)采集到ABCDEF六個(gè)點(diǎn)
2)取前面三個(gè)點(diǎn)ABC計(jì)算,BC的中點(diǎn)B1,以A為起點(diǎn),B為控制點(diǎn),B1為終點(diǎn),那么利用quadraticCurveTo可以繪制出這樣一條貝塞爾曲線
3)接下來(lái)計(jì)算CD的中點(diǎn)C1,以B1為起點(diǎn),C為控制點(diǎn),C1為終點(diǎn),那么利用quadraticCurveTo可以繪制出這樣一條貝塞爾曲線
4)以此類推,當(dāng)?shù)搅俗詈笠粋€(gè)點(diǎn)時(shí)以D1為起點(diǎn),E為控制點(diǎn),F(xiàn)為終點(diǎn),結(jié)束貝塞爾繪制。
根據(jù)算法進(jìn)行代碼改造
OK我們介紹了具體算法的影響,那用該算法對(duì)我們前面的代碼進(jìn)行改造:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<style>
canvas {
border: 1px solid #ccc
}
body {
margin: 0;
}
</style>
</head>
<body style="overflow: hidden;background-color: rgb(250, 250, 250);touch-action: none;">
<canvas id="c" width="1920" height="1080"></canvas>
<script>
var el = document.getElementById('c');
var ctx = el.getContext('2d');
//設(shè)置繪制線條樣式
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
var isDrawing;//標(biāo)記是否要繪制
//存儲(chǔ)坐標(biāo)點(diǎn)
let points = [];
document.body.onpointerdown = function (e) {
console.log('pointerdown');
isDrawing = true;
points.push({ x: e.clientX, y: e.clientY });
};
document.body.onpointermove = function (e) {
console.log('pointermove');
if (isDrawing) {
draw(e.clientX, e.clientY);
}
};
document.body.onpointerup = function (e) {
if (isDrawing) {
draw(e.clientX, e.clientY);
}
points = [];
isDrawing = false;
};
function draw(mousex, mousey) {
points.push({ x: mousex, y: mousey });
ctx.beginPath();
let x = (points[points.length - 2].x + points[points.length - 1].x) / 2,
y = (points[points.length - 2].y + points[points.length - 1].y) / 2;
if (points.length == 2) {
ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
ctx.lineTo(x, y);
} else {
let lastX = (points[points.length - 3].x + points[points.length - 2].x) / 2,
lastY = (points[points.length - 3].y + points[points.length - 2].y) / 2;
ctx.moveTo(lastX, lastY);
ctx.quadraticCurveTo(points[points.length - 2].x, points[points.length - 2].y, x, y);
}
ctx.stroke();
points.slice(0, 1);
}
</script>
</body>
</html>
在原有基礎(chǔ)上我們用了一個(gè)數(shù)組points保存鼠標(biāo)經(jīng)過(guò)的點(diǎn),根據(jù)算法可知繪制貝塞爾曲線至少要用三個(gè)點(diǎn),繪制過(guò)程中維護(hù)points數(shù)組。
實(shí)現(xiàn)效果如下,可見(jiàn)平滑了很多!
后續(xù)文章:
實(shí)現(xiàn)蠟筆效果,實(shí)現(xiàn)筆鋒效果,畫筆性能優(yōu)化
那么今天小編就“在html5中使用canvas畫板實(shí)現(xiàn)平滑曲線的案例分享 !”這個(gè)方面的內(nèi)容和大家分享就到這里了,更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解!