Canvas HTML 5画布绘图应用程序未绘图
我有一个简单的html5画布绘图应用程序的以下代码（源代码）。然而，我不能让画布在鼠标上画下来。有什么想法吗 在Firefox中尝试过这个，而不是IE 谢谢你的帮助Canvas HTML 5画布绘图应用程序未绘图,canvas,svg,jquery-svg,Canvas,Svg,Jquery Svg,我有一个简单的html5画布绘图应用程序的以下代码（源代码）。然而，我不能让画布在鼠标上画下来。有什么想法吗 在Firefox中尝试过这个，而不是IE 谢谢你的帮助 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="text/javascript">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};
/* Mouse Capturing Work */
canvas.addEventListener('mousemove', function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'blue';
canvas.addEventListener('mousedown', function(e) {
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);
var onPaint = function() {
ctx.beginPath();
ctx.moveTo(last_mouse.x, last_mouse.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.closePath();
ctx.stroke();
};
</script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
#sketch {
border: 10px solid gray;
height: 100%;
}
</style>
</head>
<body>
<div id="sketch">
<canvas id="paint"></canvas>
</div>
</body>
</html>
无标题文件
var canvas=document.querySelector（“#paint”）；
var ctx=canvas.getContext（'2d'）；
var sketch=document.querySelector（“#sketch”）；
var sketch_style=getComputedStyle（草图）；
canvas.width=parseInt（sketch_style.getPropertyValue（'width'）；
canvas.height=parseInt（sketch_style.getPropertyValue（'height'）；
变量鼠标={x:0，y:0}；
var last_mouse={x:0，y:0}；
/*捕鼠工作*/
canvas.addEventListener（'mousemove'，函数（e）{
last_mouse.x=mouse.x；
last_mouse.y=mouse.y；
mouse.x=e.pageX-this.offsetLeft；
mouse.y=e.pageY-this.offsetTop；
}，假）；
/*绘画应用程序*/
ctx.lineWidth=5；
ctx.lineJoin='round'；
ctx.lineCap='圆形'；
ctx.strokeStyle='蓝色'；
canvas.addEventListener（'mousedown'，函数（e）{
canvas.addEventListener（'mousemove'，onPaint，false）；
}，假）；
addEventListener（'mouseup'，function（）{
canvas.removeEventListener（'mousemove'，onPaint，false）；
}，假）；
var onPaint=函数（）{
ctx.beginPath（）；
ctx.moveTo（last_mouse.x，last_mouse.y）；
ctx.lineTo（mouse.x，mouse.y）；
ctx.closePath（）；
ctx.stroke（）；
};
html，正文{
宽度：100%；
身高：100%；
}
#素描{
边框：10px实心灰色；
身高：100%；
}
var canvas=document.querySelector（“#paint”）；