canvas笔记-在canvas中使用其他HTML元素
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-在canvas中使用其他HTML元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里使用的原理是使用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，也就是生成絕對定位的元素，然后設置下透明度啥的。
總結
以上是生活随笔為你收集整理的canvas笔记-在canvas中使用其他HTML元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： XShell笔记-XShell登录脚本的
- 下一篇： 2017年html5行业报告,云适配发布