这里使用的原理是使用css把div中关于html的元素通过布局位置,以及透明相关的设置,将其设置到canvas上,这样看起来就是在canvas绘制的按钮。然后使用JavaScript获取按钮的数据或者其他数据设置到canvas中。
程序运行截图如下:
点击控制面板的按钮
再点击一个
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#canvas-wrapper{
width: 1200px;
height: 800px;
position: relative;
margin: 50px auto;
}
#canvas{
border: 1px solid #aaaaaa;
}
#controller{
position: absolute;
top: 30px;
left: 30px;
background-color: rgba(0, 85, 116, 0.7);
padding: 5px 20px 25px 20px;
border-radius: 10px 10px;
}
#controller h1{
color: white;
font-width: bold;
font-family: Microsoft Yahei;
}
#controller .color-btn{
display: inline-block;
padding: 5px 15px;
border-radius: 6px 6px;
font-size: 14px;
margin-top: 10px;
margin-right: 5px;
text-decoration: none;
}
#controller #white-color-btn{
background-color: white;
}
#controller #black-color-btn{
background-color: black;
}
#controller #green-color-btn{
background-color: green;
}
#controller #blue-color-btn{
background-color: blue;
}
</style>
</head>
<body>
<div id="canvas-wrapper">
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持canvas
</canvas>
<div id="controller">
<h1>控制面板</h1>
<a href="#" class="color-btn" id="white-color-btn"> </a>
<a href="#" class="color-btn" id="black-color-btn"> </a>
<a href="#" class="color-btn" id="green-color-btn"> </a>
<a href="#" class="color-btn" id="blue-color-btn"> </a>
</div>
</div>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 1200;
canvas.height = 800;
let context = canvas.getContext("2d");
document.getElementById("white-color-btn").onclick = function(event){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "white";
context.fillRect(0, 0, canvas.width, canvas.height);
return false;
}
document.getElementById("black-color-btn").onclick = function(event){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
return false;
}
document.getElementById("green-color-btn").onclick = function(event){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "green";
context.fillRect(0, 0, canvas.width, canvas.height);
return false;
}
document.getElementById("blue-color-btn").onclick = function(event){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "blue";
context.fillRect(0, 0, canvas.width, canvas.height);
return false;
}
}
</script>
</body>
</html>
这里解析下上面代码的部分逻辑,这里把canvas和按钮相关都放到id为canvas-wrapper的div中,在canvas-wrapper中的css使用position为relative也就是相对定位的元素。在id为controller中div中将position设置为absolute,也就是生成绝对定位的元素,然后设置下透明度啥的。