计算机不能直接生成曲线，我们所看的曲线都是由线段构成的。
<!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>
385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
