Question

我正在使用jsfiddle来存储一些坐标。坐标显示在jsfiddle上，但是当我将其复制到我的本地文件时，坐标不会显示。我想在我的本地文件上显示该行的坐标，如何做到这一点？

这是我的HTML文件

<canvas id="canvas" width="300" height="300" style="border: 1px solid black;">     </canvas>  
<div id="coord"></div>  
<div id="coords"></div>

这是我的Javascript文件

var canvas = document.getElementById('canvas'),  
coord = document.getElementById('coord'),
ctx = canvas.getContext('2d'), // get 2D context
imgCat = new Image(),
arr = [];

imgCat.src = ''http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png';
imgCat.onload = function() { // wait for image load
ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
}; 

var mousedown = false;
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 5;
canvas.onmousedown = function(e) {
arr = [];
var pos = fixPosition(e, canvas);
mousedown = true;
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
return false;
};

canvas.onmousemove = function(e) {
var pos = fixPosition(e, canvas);
coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
if (mousedown) {
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
arr.push([pos.x, pos.y])  
}
};
canvas.onmouseup = function(e) {
mousedown = false;
$('#coords').html(JSON.stringify(arr, null, 2));
};

function fixPosition(e, gCanvasElement) {
var x;
var y;
if (e.pageX || e.pageY) { 
x = e.pageX;
y = e.pageY;
}
else { 
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
return {x: x, y:y};
}

Demo Here

Answer 1

在html页面中复制此内容。问题是你的链接imgCat.src =＆＃39;＆＃39; http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png＆＃39 ;; 你放了两个＆＃39;

<html>
<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>  
<div id="coord"></div>  
<div id="coords"></div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js</script> 
</html>

<script type="text/javascript">
var canvas = document.getElementById('canvas'),  
coord = document.getElementById('coord'),
ctx = canvas.getContext('2d'), // get 2D context
imgCat = new Image(),
arr = [];

imgCat.src ='http://www.clipartbest.com/cliparts/bTy/E5x/bTyE5xLjc.png';
imgCat.onload = function() { // wait for image load
ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
}; 

var mousedown = false;
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 5;
canvas.onmousedown = function(e) {
arr = [];
var pos = fixPosition(e, canvas);
mousedown = true;
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
return false;
};

canvas.onmousemove = function(e) {
var pos = fixPosition(e, canvas);
coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
if (mousedown) {
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
arr.push([pos.x, pos.y])  
}
};
canvas.onmouseup = function(e) {
mousedown = false;
$('#coords').html(JSON.stringify(arr, null, 2));
};

function fixPosition(e, gCanvasElement) {
var x;
var y;
if (e.pageX || e.pageY) { 
x = e.pageX;
y = e.pageY;
}
else { 
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
return {x: x, y:y};
}
</script>

Answer 2

某些配置会自动应用于jsfiddle，您需要手动应用它们。

首先，您需要将jQuery添加到您的站点。在<head> </head>代码之间添加此行：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

第二，您需要检查脚本是否在页面加载时执行。你需要把代码放到这个：

$(function() {
// You script here
});

或将其放在</body>代码

之前

所以在输出中你的jquery代码将是这样的：

<script>
$(function() {
var canvas = document.getElementById('canvas'),  
coord = document.getElementById('coord'),
ctx = canvas.getContext('2d'), // get 2D context
imgCat = new Image(),
arr = [];

imgCat.src = ''http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png';
imgCat.onload = function() { // wait for image load
ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
}; 

var mousedown = false;
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 5;
canvas.onmousedown = function(e) {
arr = [];
var pos = fixPosition(e, canvas);
mousedown = true;
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
return false;
};

canvas.onmousemove = function(e) {
var pos = fixPosition(e, canvas);
coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
if (mousedown) {
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
arr.push([pos.x, pos.y])  
}
};
canvas.onmouseup = function(e) {
mousedown = false;
$('#coords').html(JSON.stringify(arr, null, 2));
};

function fixPosition(e, gCanvasElement) {
var x;
var y;
if (e.pageX || e.pageY) { 
x = e.pageX;
y = e.pageY;
}
else { 
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
return {x: x, y:y};
}
});
</script>

Answer 3

1.检查HTML的doc类型：应该是html for（HTML 5）还是没有doc类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.确保您的脚本正确加载。检查Jquery脚本的路径。 - 需要取消阻止外部下载的脚本（Righ Click - ＆gt; Properties - ＆gt;（General Tab）＆＃39; Unblock＆＃39;选项在底部）（右键单击 - ＆gt;属性 - ＆gt;（常规标签） - ＆gt;高级 - ＆gt;如果选中则取消选中加密选项。）

3.将代码放在函数中。（特别是绑定相关代码。）其他功能需要在文档就绪之外定义。（已经完成）并在文档中调用该函数。

$(document).ready(function () {
  DrawImage();
});

function DrawImage()
{
  //your code here
  var canvas = document.getElementById('canvas'),
    coord = document.getElementById('coord'),
    ctx = canvas.getContext('2d'), // get 2D context
    imgCat = new Image(),
    arr = [];

/*********** draw image *************/
imgCat.src = 'http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png';
imgCat.onload = function() { // wait for image load
    ctx.drawImage(imgCat, 0, 0); // draw imgCat on (0, 0)
};

/*********** handle mouse events on canvas **************/
var mousedown = false;
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 5;
canvas.onmousedown = function(e) {
    arr = [];
    var pos = fixPosition(e, canvas);
    mousedown = true;
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
    return false;
};

canvas.onmousemove = function(e) {
    var pos = fixPosition(e, canvas);
    coord.innerHTML = '(' + pos.x + ',' + pos.y + ')';
    if (mousedown) {
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
        arr.push([pos.x, pos.y])
    }
};

canvas.onmouseup = function(e) {
    mousedown = false;
    $('#coords').html(JSON.stringify(arr, null, 2));
};

}

//Utils
function fixPosition(e, gCanvasElement) {
  //put codes of this function here.
}

Answer 4

只需在body标记结束前添加脚本，您的问题就会解决。

为什么我的代码在jsfiddle上工作，而不是我的HTML文件

4 个答案: