这里使用的原理是使用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("https://cdn.jxasp.com:9143/image/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，也就是生成绝对定位的元素，然后设置下透明度啥的。
