<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid red;
}
.box {
width: 510px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"> <canvas id="canvas" width="500" height="500">
您的浏览器不支持canvas,请升级为最新版。
</canvas>
<br> 线的宽度:
<select name="" id="wid">
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
<option value="5">5px</option>
<option value="6">6px</option>
</select> 线的颜色:
<input type="color" id="color">
<button id="clear">清空</button>
</div>
<script>
/* 获取画布 */
const canvas = document.getElementById("canvas")
/* 获取线的宽度 */
const wid = document.getElementById("wid")
/* 线的颜色 */
const color = document.getElementById("color")
/* 获取清空按钮 */
const clear = document.getElementById("clear")
if (canvas.getContext) {
/* 定义工具 */
const ctx = canvas.getContext("2d")
/* 绑定鼠标按下事件 */
canvas.onmousedown = function(event) {
event = event || window.event //兼容写法
/* 设置线的宽度 */
ctx.lineWidth = wid.value
/* 设置现的颜色 */
ctx.strokeStyle = color.value
ctx.beginPath();
/* 设置起点位置 */
ctx.moveTo(event.offsetX, event.offsetY)
/* 添加鼠标移动事件 */
canvas.onmousemove = function(event) {
event = event || window.event //兼容写法
ctx.lineTo(event.offsetX, event.offsetY)
/* 添加描边 */
ctx.stroke();
}
}
/* 添加鼠标解绑事件 */
window.onmouseup = function() {
canvas.onmousemove = null
}
/* 设置清空 */
clear.onclick = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
}
</script>
</body>
</html>
js 使用canvas制作一个简易的画板
最新推荐文章于 2023-09-14 09:53:23 发布