HTML 5-帶畫布的繪圖應用程序未繪圖
[英]HTML 5 - drawing app with canvas is not drawing
問題描述
我試圖用這樣的畫布創建一個繪圖應用程序：
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
canvas{
border: 1px solid black
}
</style>
<title>Qui sommes-nous?</title>
</head>
<body>
<canvas id = "a" width = "400" height = "200"></canvas>
<script type="text/javascript">
var md = false;
var canvas = document.getElementById('a');
canvas.addEventListener('mousedown', down);
canvas.addEventListener('mouseup', toggledraw);
canvas.addEventListener('mousemove',
function (evt){
var mousePos = getMousePos (canvas, evt);
var posx = mousePos;.x;
var posy = mousePos.y;
draw(canvas, posx, posy);
});
function down(){
md = true;
}
function toggledraw(){
md = false;
}
function getMousePos(canvas, evt){
var rect = canvas.getBoundingClientRect();
return {
x:evt.clientX - rect.left,
y:evt.clientY - rect.top
};
}
function draw (canvas, posx, posy){
var context = canvas.getContext('2d');
if (md){
context.fillRect(posx, posy, 4, 4);
}
}
</script>
</body>
但是，當我嘗試在屏幕上繪畫時，什么也沒發生。 我在Chrome，Firefox和Safari上嘗試過。 我一直在尋找最簡單的方法，但我不明白自己的錯誤……我在做什么錯？
2 個解決方案
解決方案1
1 2019-01-08 14:08:09
在第8行中，您有：
var posx = mousePos;.x;
的; 是錯的。 這是對的：
var posx = mousePos.x;
var md = false; var canvas = document.getElementById('a'); canvas.addEventListener('mousedown', down); canvas.addEventListener('mouseup', toggledraw); canvas.addEventListener('mousemove', function (evt){ var mousePos = getMousePos (canvas, evt); var posx = mousePos.x; var posy = mousePos.y; draw(canvas, posx, posy); }); function down(){ md = true; } function toggledraw(){ md = false; } function getMousePos(canvas, evt){ var rect = canvas.getBoundingClientRect(); return { x:evt.clientX - rect.left, y:evt.clientY - rect.top }; } function draw (canvas, posx, posy){ var context = canvas.getContext('2d'); if (md){ context.fillRect(posx, posy, 4, 4); } }
canvas { border: 1px solid black; }
<canvas id="a" width="400" height="200"></canvas>
解決方案2
1 2019-01-08 14:09:17
進行調試時，應先詢問控制台（開發人員工具），然后再詢問此處。 在您的情況下，您遇到語法錯誤var posx = mousePos;.x; –第一; 不應該在那里。
var md = false; var canvas = document.getElementById('a'); canvas.addEventListener('mousedown', down); canvas.addEventListener('mouseup', toggledraw); canvas.addEventListener('mousemove', function (evt){ var mousePos = getMousePos (canvas, evt); var posx = mousePos.x; var posy = mousePos.y; draw(canvas, posx, posy); }); function down(){ md = true; } function toggledraw(){ md = false; } function getMousePos(canvas, evt){ var rect = canvas.getBoundingClientRect(); return { x:evt.clientX - rect.left, y:evt.clientY - rect.top }; } function draw (canvas, posx, posy){ var context = canvas.getContext('2d'); if (md){ context.fillRect(posx, posy, 4, 4); } }
canvas{ border: 1px solid black; }
<canvas id="a" width="400" height="200"></canvas>
添加文本工具以繪制應用程序HTML，Canvas
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.