計算機不能直接生成曲線，我們所看的曲線都是由線段構成的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drawing</title>
</head>
<body>
<div id="content">
<label for="color_picker" hidden></label>
<input type="color" id="color_picker" />
<input type="button" id="clear_button" value="Clear" />
</div>
<canvas id="canvas">
</canvas>
</body>
</html>
<script>
// 獲取canvas標籤
let canvas = document.getElementById('canvas');
// 獲取 2D渲染接口
const ctx = canvas.getContext('2d');
// 將渲染顏色設置爲 黑色 #000000
ctx.strokeStyle = '#000000';
//
ctx.setLineDash([]);
canvas.setAttribute('height', 1000 + 'px');
canvas.setAttribute('width', 1000 + 'px');
// 線段開始位置
let startP = {x: 0, y: 0};
// 線段結束位置
let endP = {x: 0, y: 0};
// 添加 mousedown 事件
canvas.addEventListener('mousedown', mousedown);
// 添加 mouseup 事件
canvas.addEventListener('mouseup', mouseup);
// 添加 mouseleave 事件
canvas.addEventListener('mouseleave',mouseleave);
/**
* @summary 按下鼠標右鍵發生的事件
*/
function mousedown(e) {
// 將線段開始位置設爲鼠標點擊的位置
startP = {x:e.clientX,y:e.clientY};
// 將畫筆移到始點
ctx.moveTo(startP.x, startP.y);
console.log('Mouse down.');
canvas.addEventListener('mousemove', mousemove);
}
/**
* mouse move event
* @param e
*/
function mousemove(e) {
ctx.beginPath();
ctx.moveTo(startP.x, startP.y);
// 設置線段終點
endP = {x:e.clientX,y:e.clientY};
console.log(JSON.stringify(startP) + ',' + JSON.stringify(endP));
// 告訴畫筆線段終點位置
ctx.lineTo(endP.x, endP.y);
// 畫線段
ctx.stroke();
// 將下一條線段七點設置爲當前線段的終點
startP = endP;
ctx.moveTo(startP.x, startP.y);
}
/**
* @summary 鼠標釋放時後，停止畫圖
* @param e mouseup event handler
*/
function mouseup(e) {
console.log('Mouse up.');
canvas.removeEventListener('mousemove', mousemove);
//clearInterval(interval);
}
/**
* @summary 鼠標離開畫布後，停止畫圖
* @param e
*/
function mouseleave(e) {
canvas.removeEventListener('mousemove',mousemove);
console.log('Mouse leave.')
}
const color_picker = document.getElementById('color_picker');
color_picker.onchange = function (e) {
console.log('Color changed to.' + color_picker.value);
// 改變畫筆顏色
ctx.strokeStyle = color_picker.value;
};
const clear_button = document.getElementById('clear_button');
clear_button.onclick=function (e) {
// 清空畫板
ctx.clearRect(0,0,canvas.width,canvas.height);
}
</script>
<style>
#canvas {
background-color: white;
}
#clear_button{
z-index: 10;
position:absolute;
left: 100px;
top:1px;
font-size: 20px;
}
#content {
position: absolute;
}
body {
background: orange;
}
</style>