Fatal编程技术网
  • javascript/
  • Javascript 为什么我的代码在JSFIDLE上工作，而不是在HTML文件上工作

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

javascript jquery html

Javascript 为什么我的代码在JSFIDLE上工作，而不是在HTML文件上工作,javascript,jquery,html,jsfiddle,Javascript,Jquery,Html,Jsfiddle,我正在使用JSFIDLE存储一些坐标。坐标显示在JSFIDLE上，但当我将其复制到本地文件时，坐标不会显示。 我想在我的本地文件上显示那条线的坐标，怎么做 这是我的HTML文件 <canvas id="canvas" width="300" height="300" style="border: 1px solid black;"> </canvas> <div id="coord"></div> <div id="coord

我正在使用JSFIDLE存储一些坐标。坐标显示在JSFIDLE上，但当我将其复制到本地文件时，坐标不会显示。 我想在我的本地文件上显示那条线的坐标，怎么做

这是我的HTML文件

<canvas id="canvas" width="300" height="300" style="border: 1px solid black;">     </canvas>  
<div id="coord"></div>  
<div id="coords"></div>
将其复制到html页面中。问题是你的链接imgCat.src=''； 你放了两个“



一些配置会自动应用于JSFIDLE，您需要手动应用它们

首先，您需要将jQuery添加到您的站点。在
标记之间添加此行：


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


或者把它放在标签前面

因此，在输出中，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>




$（函数（）{
var canvas=document.getElementById（'canvas'），
coord=document.getElementById（'coord'），
ctx=canvas.getContext（'2d'），//获取2d上下文
imgCat=新图像（），
arr=[]；
imgCat.src=“”http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png';
imgCat.onload=函数（）{//等待图像加载
ctx.drawImage（imgCat，0，0）；//在（0，0）上绘制imgCat
}; 
var mousedown=false；
ctx.strokeStyle='#0000FF'；
ctx.lineWidth=5；
canvas.onmousedown=函数（e）{
arr=[]；
var pos=固定位置（e，画布）；
mousedown=true；
ctx.beginPath（）；
ctx.移动到（位置x、位置y）；
返回false；
};
canvas.onmousemove=函数（e）{
var pos=固定位置（e，画布）；
coord.innerHTML='（'+pos.x+'，'+pos.y+'）；
如果（鼠标向下）{
ctx.lineTo（位置x、位置y）；
ctx.stroke（）；
方位推送（[位置x，位置y]）
}
};
canvas.onmouseup=函数（e）{
mousedown=false；
$（'#coords'）.html（JSON.stringify（arr，null，2））；
};
功能固定位置（e、GCA元件）{
var x；
变量y；
如果（e.pageX | | e.pageY）{
x=e.pageX；
y=e.pageY；
}
否则{
x=e.clientX+document.body.scrollLeft+
document.documentElement.scrollLeft；
y=e.clientY+document.body.scrollTop+
document.documentElement.scrollTop；
} 
x-=gCanvasElement.offsetLeft；
y-=gCanvasElement.offsetTop；
返回{x:x，y:y}；
}
});

1.检查HTML的文档类型：应为HTML（HTML 5）或无文档类型


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


}


只需在body标记末尾之前添加脚本，您的问题就会解决。
请检查是否需要添加任何依赖文件，如jQuery plugin。询问此问题时，您是否查看了所有副本。它们仍然可以在此页面的右侧看到。问题是DOM就绪事件等。请检查JSFIDLE its 1.6中的jQuery插件版本。2还要检查html内容类型是否支持画布标记欢迎使用堆栈溢出！查看并告诉您在那里看到的错误以及它们指向的行。请您为我解释imgCat.src的错误，因为我尝试复制此代码，但无效。您提供的链接无效。尝试使用其他类似的链接，您应该将文件保存在本地，以避免此类问题，或确保链接始终可用。我刚更改了链接，我仍然无法看到JSFIDDLE中的坐标，您在哪个浏览器中打开html文件。我打开它与铬和它的工作。在IE中，确保浏览器不会阻止js。这是一个安全参数那么我是否丢失了jquery文件？o

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



<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>



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



$(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.
}