I'我想放下画布上的文字.帮帮我

I'm want to drop text of canvas.. help me

本文关键字：文字 放下      更新时间：2023-09-26

尊敬的开发人员。

在写这个问题之前，我的英语很差。

我正在学习javascript。

但有一个问题是工作。。

我想放下画布上的文字。。但是我不知道如何放下这条短信。。

如何修改此代码。。？请帮帮我…

 <script type="text/javascript">
 var Text_array = new Array("exam1", "exam2", "exam3");
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 ctx.font = "30px Arial";
 for (i = 0; i < 3; i++) {
        ctx.fillText(Text_array[i], 100 * i + 10, 50);
 }
function removeText()
{
	var removeText = document.getElementById("txtWord").value;
	var position = Text_array.indexOf(removeText);
	if( position  > -1)
	{
		Text_array.splice(position,1);
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		
		for (i = 0; i < Text_array.length; i++) {
        		ctx.fillText(Text_array[i], 100 * i + 10, 50);
 		}		
	}
}
 </script>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
    .box {
            position: relative;
            width: 800px;
            height: 600px;
     }
         .box canvas {
                border: 1px solid red;
         }
         .box .control {
                position: relative;
                bottom: 30px;
                z-index: 999;
                width: 100%;
                padding: 5px;
                border: 1px solid blue;
                display: inline-block;
         }
            .box .control input {
                    float: left;
                    width: 45%;
             }
             .box .control button {
                    float: right;
                    width: 45%;
                    color: #000;
                   margin-right: 15px;
             }
 </style>
 </head>
 <body>
 <div class="box">
     
     <canvas id="myCanvas" width="800" height="600">
         Your browser does not support the canvas element.
     </canvas>
     <div class="control">
         <input id="txtWord" type="text" name="word" value=""> 
         <button type="button" class="btn" title="" onclick="javascript:removeText();" >Btn</button>
     </div>
 </div>
 </body>
 </html>

这个代码一切都很好，只是我删除了<script type="text/javascript">和</script>表单代码，它的工作。。。

 var Text_array = new Array("exam1", "exam2", "exam3");
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 ctx.font = "30px Arial";
 for (i = 0; i < 3; i++) {
        ctx.fillText(Text_array[i], 100 * i + 10, 50);
 }
function removeText()
{
	var removeText = document.getElementById("txtWord").value;
	var position = Text_array.indexOf(removeText);
	if( position  > -1)
	{
		Text_array.splice(position,1);
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		
		for (i = 0; i < Text_array.length; i++) {
        		ctx.fillText(Text_array[i], 100 * i + 10, 50);
 		}		
	}
}
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
    .box {
            position: relative;
            width: 800px;
            height: 600px;
     }
         .box canvas {
                border: 1px solid red;
         }
         .box .control {
                position: relative;
                bottom: 30px;
                z-index: 999;
                width: 100%;
                padding: 5px;
                border: 1px solid blue;
                display: inline-block;
         }
            .box .control input {
                    float: left;
                    width: 45%;
             }
             .box .control button {
                    float: right;
                    width: 45%;
                    color: #000;
                   margin-right: 15px;
             }
 </style>
 </head>
 <body>
 <div class="box">
     
     <canvas id="myCanvas" width="800" height="600">
         Your browser does not support the canvas element.
     </canvas>
     <div class="control">
         <input id="txtWord" type="text" name="word" value=""> 
         <button type="button" class="btn" title="" onclick="javascript:removeText();" >Btn</button>
     </div>
 </div>
 </body>
 </html>

相关文章：