我正在尝试将 Canvas 元素 (drawWiFiIcon()) 放在 css 文本框的顶部，但我相信我正在努力处理范围。这是我的测试代码:
<!DOCTYPE html><head>
<title>Test</title><meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=0'>
<style>body{background-color:white; transition: background-color 3000ms;}h2{color:maroon;}.sansserif{font-family: Arial, Helvetica, sans-serif;} .hide{display:none;}</style>
<script>
var index = 0;
function nextMode(){
var ctx = document.getElementById('testModeIcon').getContext('2d');
ctx.clearRect(0, 0, document.getElementById('testModeIcon').width, document.getElementById('testModeIcon').height);
document.getElementById('circle').innerHTML = '';
switch(index % 5) {
case 0:
document.getElementById('circle').style.background = 'blue';
document.getElementById('circle').innerHTML = 'A';
break;
case 1:
document.getElementById('circle').style.background = 'green';
document.getElementById('circle').innerHTML = 'B';
break;
case 2:
document.getElementById('circle').style.background = 'black';
document.getElementById('circle').innerHTML = 'C';
break;
case 3:
document.getElementById('circle').style.background = 'cyan';
drawWiFiIcon();
break;
case 4:
document.getElementById('circle').style.background = 'yellow';
document.getElementById('circle').innerHTML = 'E';
break;
}
index++;
};
function drawWiFiIcon(){
var ctx = document.getElementById('testModeIcon').getContext('2d');
ctx.lineCap='round';
ctx.lineWidth=3;
ctx.lineJoin='round';
ctx.beginPath();
ctx.arc(50,50,40,1.25*Math.PI,1.75*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,30,1.25*Math.PI,1.75*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,20,1.25*Math.PI,1.75*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,10,1.25*Math.PI,1.75*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,1,0,2*Math.PI);
ctx.stroke();
ctx.font = '15px Arial';
ctx.fillText('Wi-Fi',32,70);
};
</script>
</head>
<body>
<style type='text/css'>.filledCircle{width: 100px;height: 100px; font-size: 90px; color: #fff; background: #94C6D6; margin:auto; border-radius: 50px; transition-duration: 1500ms;}</style>
<hr />
</div>
<div align='center' onclick = 'nextMode()'; class='sansserif';>
<div class = 'filledCircle' id = 'circle'></div>
<canvas id = 'testModeIcon' width='100' height='75'></canvas>
</div>
<hr />
</body>
</html>
我试过像这样将 canvas 元素放在框(圆)div 中:
<div class = 'filledCircle' id = 'circle'><canvas id = 'testModeIcon' width='100' height='75'></canvas></div>
但是我无法访问 testModeIcon...
感谢任何帮助
最佳答案
var index = 0;
function nextMode(){
var ctx = document.getElementById('testModeIcon').getContext('2d');
ctx.clearRect(0, 0, document.getElementById('testModeIcon').width, document.getElementById('testModeIcon').height);
document.getElementById('circle_inner').innerHTML = '';
switch(index % 5) {
case 0:
document.getElementById('circle').style.background = 'blue';
document.getElementById('circle_inner').innerHTML = 'A';
break;
case 1:
document.getElementById('circle').style.background = 'green';
document.getElementById('circle_inner').innerHTML = 'B';
break;
case 2:
document.getElementById('circle').style.background = 'black';
document.getElementById('circle_inner').innerHTML = 'C';
break;
case 3:
document.getElementById('circle').style.background = 'cyan';
drawWiFiIcon();
break;
case 4:
document.getElementById('circle').style.background = 'yellow';
document.getElementById('circle_inner').innerHTML = 'E';
break;
}
index++;
};
function drawWiFiIcon(){
var ctx = document.getElementById('testModeIcon').getContext('2d');
ctx.lineCap='round';
ctx.lineWidth=3;
ctx.lineJoin='round';
ctx.beginPath();
ctx.arc(50,50,40,1.25*Math.PI,1.75*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,30,1.25*Math.PI,1.75*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,20,1.25*Math.PI,1.75*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,10,1.25*Math.PI,1.75*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,1,0,2*Math.PI);
ctx.stroke();
ctx.font = '15px Arial';
ctx.fillText('Wi-Fi',32,70);
};<!DOCTYPE html><head>
<title>Test</title><meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=0'>
<style>body{background-color:white; transition: background-color 3000ms;}h2{color:maroon;}.sansserif{font-family: Arial, Helvetica, sans-serif;} .hide{display:none;}</style>
</head>
<body>
<style type='text/css'>.filledCircle{width: 100px;height: 100px; font-size: 90px; color: #fff; background: #94C6D6; margin:auto; border-radius: 50px; transition-duration: 1500ms;}</style>
<hr />
</div>
<div align='center' onclick = 'nextMode()'; class='sansserif';>
<div class = 'filledCircle' id = 'circle'><div id='circle_inner' ></div><canvas id = 'testModeIcon' width='100' height='75'></canvas></div>
</div>
<hr />
</body>
</html>我想这就是你想要的!!!
我在 #circle 中添加了一个 div #circle_inner 并相应地更改了 javascript 代码以使其正常工作..
关于javascript - 将 Canvas 放在 CSS 文本框的顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41253490/