Question

我试图将一个画布元素（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 ...

感谢任何帮助

Answer 1

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_inner内添加了一个div #circle并相应更改了javascript代码以便工作..

将画布放在CSS文本框的顶部

1 个答案: