canvas标签介绍：菜鸟教程 https://www.runoob.com/html/html5-canvas.html
<!--
* @Author: bkk
* @weixin: biankuan1996
* @email: 15239111596@163.com
* @Date: 2021-06-03 21:25:13
* @LastEditTime: 2021-06-03 22:30:59
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画布</title>
<style>
canvas {
display: block;
border: 1px solid #333;
}
div{
padding: 20px 0;
display: flex;
justify-content: space-between;
}
div {
width: 500px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width=500 height=500></canvas>
<div>
<span>画笔颜色：<input type="color" id="colorBtn"></span>
<button class="clear">清除画布</button>
</div>
<script>
// @type {HTMLCanvasElement}
// 获取画布对象
var myCanvas = document.querySelector("#myCanvas"),
clearBtn = document.getElementsByClassName("clear")[0]
// 获取画布环境
var ctx = myCanvas.getContext("2d");
var flag = false;// 定义一个布尔变量判断鼠标的状态
// 鼠标在画布上按下时
myCanvas.onmousedown = function (e) {
// 开始绘制
ctx.beginPath();
// 定义鼠标按下时的坐标为开始坐标
ctx.moveTo(e.clientX, e.clientY);
// 修改flag的值为true
flag = !flag;
}
// 当颜色选择框发生变化时，把用户所选择的颜色复制给画笔颜色
colorBtn.onchange = function () {
ctx.strokeStyle = this.value;
}
// 鼠标在画布上滑动时
myCanvas.onmousemove = function (e) {
// 如果flag == true即鼠标按下时执行下列操作
if (flag) {
ctx.lineTo(e.clientX, e.clientY)
ctx.stroke();
}
}
// 鼠标松开时
myCanvas.onmouseup = function (e) {
// 鼠标松开时，flag恢复为初识值
flag = !flag;
}
// 清除画布
clearBtn.onclick = function () {
// 定义橡皮擦和画布同宽高
ctx.clearRect(0, 0, 500, 500)
}
</script>
</body>
</html>
6073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
