我有一个代码,当我从 PC 的任何部分运行它而不将它放在服务器上时,它可以完美运行,但是当我将它放在服务器上并调用它时,它给了我以下错误:
未捕获的 ReferenceError:在加载时未定义 crearLienzo ((index):81)
我不明白为什么会发生这种情况。谢谢你们!
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" >
var movimientos = new Array();
var pulsado;
function crearLienzo() {
var canvasDiv = document.getElementById('lienzo');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 200);
canvas.setAttribute('height', 200);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
$('#canvas').mousedown(function(e){
pulsado = true;
movimientos.push([e.pageX - this.offsetLeft,
e.pageY - this.offsetTop,
false]);
repinta();
});
$('#canvas').mousemove(function(e){
if(pulsado){
movimientos.push([e.pageX - this.offsetLeft,
e.pageY - this.offsetTop,
true]);
repinta();
}
});
$('#canvas').mouseup(function(e){
pulsado = false;
});
$('#canvas').mouseleave(function(e){
pulsado = false;
});
repinta();
}
function repinta() {
// función para dibujar en el lienzo los movimientos del ratón que hemos
// recogido en la variable "movimientos"
canvas.width = canvas.width; // Limpia el lienzo
context.strokeStyle = "#0000a0";
context.lineJoin = "round";
context.lineWidth = 6;
for(var i=0; i < movimientos.length; i++)
{
context.beginPath();
if(movimientos[i][2] && i){
context.moveTo(movimientos[i-1][0], movimientos[i-1][1]);
}else{
context.moveTo(movimientos[i][0], movimientos[i][1]);
}
context.lineTo(movimientos[i][0], movimientos[i][1]);
context.closePath();
context.stroke();
}
}
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas[0].toDataURL("image/png");
alert(image);
return image;
}
</script>
</head>
<body style="background: #eee;" onload="crearLienzo()">
<div id="lienzo" style="width: 200px; height: 200px; background: #fff;"></div>
<button type="button" onclick="convertCanvasToImage($('#canvas'));">aa</button>
</body>
</html>
将您的脚本标签放在 body 中以首先加载它
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body style="background: #eee;" onload="crearLienzo()">
<script type="text/javascript" >
var movimientos = new Array();
var pulsado;
function crearLienzo() {
var canvasDiv = document.getElementById('lienzo');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 200);
canvas.setAttribute('height', 200);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
$('#canvas').mousedown(function(e){
pulsado = true;
movimientos.push([e.pageX - this.offsetLeft,
e.pageY - this.offsetTop,
false]);
repinta();
});
$('#canvas').mousemove(function(e){
if(pulsado){
movimientos.push([e.pageX - this.offsetLeft,
e.pageY - this.offsetTop,
true]);
repinta();
}
});
$('#canvas').mouseup(function(e){
pulsado = false;
});
$('#canvas').mouseleave(function(e){
pulsado = false;
});
repinta();
}
function repinta() {
// función para dibujar en el lienzo los movimientos del ratón que hemos
// recogido en la variable "movimientos"
canvas.width = canvas.width; // Limpia el lienzo
context.strokeStyle = "#0000a0";
context.lineJoin = "round";
context.lineWidth = 6;
for(var i=0; i < movimientos.length; i++)
{
context.beginPath();
if(movimientos[i][2] && i){
context.moveTo(movimientos[i-1][0], movimientos[i-1][1]);
}else{
context.moveTo(movimientos[i][0], movimientos[i][1]);
}
context.lineTo(movimientos[i][0], movimientos[i][1]);
context.closePath();
context.stroke();
}
}
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas[0].toDataURL("image/png");
alert(image);
return image;
}
</script>
<div id="lienzo" style="width: 200px; height: 200px; background: #fff;"></div>
<button type="button" onclick="convertCanvasToImage($('#canvas'));">aa</button>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句