Fatal编程技术网
  • javascript/
  • Javascript html、js即使加载了图像和文本，也无法在画布上绘制任何内容

Javascript html、js即使加载了图像和文本，也无法在画布上绘制任何内容

javascript html forms html5-canvas

Javascript html、js即使加载了图像和文本，也无法在画布上绘制任何内容,javascript,html,forms,html5-canvas,Javascript,Html,Forms,Html5 Canvas,我正在尝试使用JS制作一个绘图页。 但是，显示画布，但不绘制线条。 图片和字体已加载，但图形未工作。 你能告诉我如何调试它或者问题是什么吗 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>draw line in the canvas</title> </head> <body onload="init()

我正在尝试使用JS制作一个绘图页。 但是，显示画布，但不绘制线条。 图片和字体已加载，但图形未工作。 你能告诉我如何调试它或者问题是什么吗

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>draw line in the canvas</title>
</head>
<body onload="init()">
<h3>draw lines with your mouse</h3>
<hr>
<canvas id="myCanvas" style="background-color:aliceblue"
     width="500" height="400">
</canvas><br>
thickness :<input type="number" id="widthInput" value="2"
    min="0" max="20" step="1" onchange="lineWidth=this.value">
colors : <input type="color" id="colorInput" value="#00ff00" onchange="strokeColor=this.value">
     
<script>
var canvas, context;
var colorInputObj, widthInputObj;
var lineWidth;
var strokeColor;

function init() {
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
    widthInputObj = document.getElementById("widthInput");  
    lineWidth =  widthInputObj.value;
    
    colorInputObj = document.getElementById("colorInput");
    strokeColor = colorInputObj.value;
    canvas.addEventListener("mousemove", function(e){move(e)}, false);
}

var startX=0, startY=0;
var drawing=false;

function draw(curX, curY) { 
    context.beginPath();
    context.lineWidth = lineWidth;
    context.strokeStyle = strokeStyle;
    context.moveTo(startX, startY);
    context.lineTo(curX,curY);
    context.stroke();
}
function down(e) {
    startX = e.offsetX;
    startY = e.offsetY;
    drawing = true;
}
function up(e) { 
    drawing = false;
}
function move(e) {
if(!drawing)
    return;
    var curX = e.offsetX;
    var curY = e.offsetY;
    draw(curX, curY);
    startX = curX;
    startY = curY;  
}
function out(e) { 
    drawing = false;    
}
</script>
</body>
</html>

<pre>
   var startAngle = document.getElementById("startAngle").value;
   var endAngle = document.getElementById("endAngle").value;
   var lineWidth = document.getElementById("lineWidth").value;
   var strokeStyle = document.getElementById("strokeStyle").value;
</pre>


在画布上画线
用鼠标画线




厚度：
颜色：
var，上下文；
var colorInputObj、WITHINPUTOBJ；
var线宽；
色差；
函数init（）{
canvas=document.getElementById（“myCanvas”）；
context=canvas.getContext（“2d”）；
widthInput=document.getElementById（“widthInput”）；
线宽=宽度InputBj.value；
colorInput=document.getElementById（“colorInput”）；
strokeColor=colorInputBj.value；
addEventListener（“mousemove”，函数（e）{move（e）}，false）；
}
var startX=0，startY=0；
var绘图=错误；
函数绘制（curX，curY）{
context.beginPath（）；
context.lineWidth=线宽；
context.strokeStyle=strokeStyle；
context.moveTo（startX，startY）；
lineTo（curX，curY）；
stroke（）；
}
功能下降（e）{
startX=e.offsetX；
startY=e.offsetY；
绘图=真；
}
函数up（e）{
图纸=假；
}
功能移动（e）{
如果（！图纸）
返回；
var curX=e.offsetX；
var curY=e.offsetY；
绘制（curX，curY）；
startX=curX；
startY=curY；
}
函数out（e）{
图纸=假；
}
此示例还仅绘制具有alice蓝色的画布。 即使事件和函数保存正确，当我单击按钮时，它也不起作用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Draw with the form!</title>
<style>
td {
    text-align : right;
    padding-left : 5px;
    padding-right : 5px;
}
</style>
<script>
function draw() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    var x = document.getElementById("x").value;
    var y = document.getElementById("y").value;
    var radius = document.getElementById("radius").value;
    
    var ori = document.getElementById("orientation");
    var index = ori.selectedIndex;
    var orientation;
    if(index == 0)
        orientation = false; 
    else
        orientation = true; 
        
    var startAngle = document.getElementById("startAngle");
    startAngle = Math.PI * parseInt(startAngle) / 180;
    var endAngle = document.getElementById("endAngle");
    endAngle = Math.PI * parseInt(endAngle) / 180;
    var lineWidth = document.getElementById("lineWidth");
    var strokeStyle = document.getElementById("strokeStyle");   
    
    context.beginPath();
    context.arc(x, y, startAngle, endAngle, orientation);
    context.lineWidth = lineWidth;
    context.strokeStyle = strokeStyle;
    context.stroke();
    
}
function erase() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    canvas.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</head>
<body>
</body>
<h3>Draw with the form!</h3>
<hr>
<form>
<table>
<tr><td><label>x <input id="x" type="number" value="100"></label></td>
    <td><label>y <input id="y" type="number" value="100"></label></td></tr>
<tr>    
    <td><label>width <input id="radius" type="number" value="80"></label></td>
    <td><label>way<select id="orientation">
                    <option value="false" selected>clock way</option>
                    <option value="true">opposite clock</option>
                   </select>
    </label></td>
</tr>
<tr><td><label>startAngle<input id="startAngle" type="number" value="0"></label></td>
    <td><label>endAngle<input id="endAngle" type="number" value="360"></label></td>
</tr>
<tr><td><label>lineWidth<input id="lineWidth" type="number" value="1"></label></td>
    <td><label>strokeStyle<input id="strokeStyle" type="color" value="#000000"></label></td></tr>
<tr><td><label><button type="button" onclick="draw()">그리기</button></label></td>
    <td><button type="button" onclick="erase()">지우기</button></td></tr>
</table>
</form>
<canvas id="myCanvas" width="500" height="200" 
        style="background-color:aliceblue"></canvas>
</html>


用表格画！
运输署{
文本对齐：右对齐；
左侧填充：5px；
右侧填充：5px；
}
函数绘图（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var x=document.getElementById（“x”）.value；
var y=document.getElementById（“y”）.value；
var radius=document.getElementById（“radius”）.value；
var ori=document.getElementById（“方向”）；
var指数=ori.selectedIndex；
var取向；
如果（索引==0）
方向=错误；
其他的
方向=正确；
var startAngle=document.getElementById（“startAngle”）；
startAngle=Math.PI*parseInt（startAngle）/180；
var endAngle=document.getElementById（“endAngle”）；
endAngle=Math.PI*parseInt（endAngle）/180；
var lineWidth=document.getElementById（“线宽”）；
var strokeStyle=document.getElementById（“strokeStyle”）；
context.beginPath（）；
弧（x，y，星形，端角，方向）；
context.lineWidth=线宽；
context.strokeStyle=strokeStyle；
stroke（）；
}
函数擦除（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
canvas.clearRect（0,0，canvas.width，canvas.height）；
}
用表格画！


x
Y
宽度
方式
钟道
对钟
星际缠结
端角
线宽
strokeStyle
그리기
지우기
以下几行中缺少value属性

谢谢你的建议！我更改了它们，但它仍然不起作用：（您有其他解决方案吗？请检查
startAngle
和
endAngle
的计算逻辑。查看链接。例如，我给您的startAngle指定了2000值。
向下
（和
向上
和
向外
）从未调用，因此
draw
始终为false，并且
draw
从未执行任何操作。您可能希望它成为mousedown事件侦听器的一部分。 
 `context.clearRect(0, 0, canvas.width, canvas.height);`