堆栈内存溢出
  简体   繁体   English

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

[英]Why is my code working on jsfiddle but not my HTML file

 原文  2014-06-04 12:06:08  5   4    javascript/ jquery/ html/ jsfiddle

问题描述

I am using jsfiddle to store some coordinates. 我正在使用jsfiddle来存储一些坐标。 The coordinates gets displayed on jsfiddle but when I copy it on my local files the coordinates don't get displayed. 坐标显示在jsfiddle上，但是当我将其复制到我的本地文件时，坐标不会显示。 I would like to display the coordinates of that line on my local files, How can this be done? 我想在我的本地文件上显示该行的坐标，如何做到这一点？

This is my HTML file 这是我的HTML文件 

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

This is my Javascript File 这是我的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 在这里演示

4 个解决方案

解决方案1
 4 已采纳  2014-06-04 12:21:44

Copy this in a html page. 在html页面中复制它。 The probleme was your link imgCat.src = '' http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png '; 问题是你的链接imgCat.src ='' http: //c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png'; You put two '' 你把两个'' 

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

解决方案2
 2  2014-06-04 12:22:06

some configuration is applying to jsfiddle automatically and you need to apply them by your hands. 一些配置自动应用于jsfiddle，您需要手动应用它们。

first you need to add jQuery to you site. 首先，您需要将jQuery添加到您的站点。 Add this line between <head> </head> tags: 在<head> </head>标记之间添加此行： 

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

second you need to check that you script executes for example when page loads. 第二，你需要检查你的脚本执行，例如页面加载时。 you need to put you code into this: 你需要把代码放到这个： 

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

or put it just before </body> tag 或者把它放在</body>标签之前

so in output you jquery code will be like this: 所以在输出中你的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>

解决方案3
 2  2014-06-04 12:32:43

1.Check the doc type of the HTML :should be html for (HTML 5)or no doc type 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.Make sure your scripts are getting loaded properly. 2.确保您的脚本正确加载。 Check the path of Jquery script. 检查Jquery脚本的路径。 --Externally downloaded scripts need to be unblocked (Righ Click -> Properties -> (General Tab)'Unblock' Option on bottom) (Right Click -> Properties -> (general Tab) -> Advanced -> Uncheck Encrypt option if checked.) - 需要取消阻止外部下载的脚本（Righ Click - >属性 - >（常规选项卡）底部的“取消阻止”选项）（右键单击 - >属性 - >（常规选项卡） - >高级 - >取消选中加密选项（如果选中） 。）

3.Put your code inside a function. 3.将代码放在函数中。 (Specifically the binding related codes.) Other functions need to be defined outside document ready.(Already done) And Call that function inside document ready. （特别是绑定相关代码。）其他功能需要在文档准备好之外定义。（已经完成）并且在文档内部调用该函数准备就绪。 

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

解决方案4
 0  2014-06-04 12:37:45

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jsfiddle代码在我的网站上不起作用 - jsfiddle code not working on my site 代码在jsfiddle中有效，但在html文件中无效 - Code is working in jsfiddle but not in html file HTML 5 Canvas在我的项目中不起作用，但是相同的代码在JSFiddle中起作用吗？ - HTML 5 Canvas not working in my project, but same code works in JSFiddle? 为什么jQuery hover可以在jsfiddle中工作，但不能在我的HTML布局中工作？ - Why is jquery hover working in jsfiddle but not in my html layout? 我的JavaScript代码无法在本地运行，但可以在jsfiddle上正常工作，为什么？ - My JavaScript code is not working locally, but works fine on jsfiddle, why? Javascript 代码在 JsFiddle 上工作但在我的主机上不工作 - Javascript code working on JsFiddle but not working on my host JSFiddle 代码在我自己的页面中不起作用 - JSFiddle code not working in my own page JSFiddle、CodePen 上的工作代码，但不在我的电脑上 - Working code on JSFiddle, CodePen, but not on my computer 视差代码可以在JSFiddle上运行，但不能在我的网站上运行吗？ - Parallax code working on JSFiddle but not on my website? 为什么我的jQuery UI CSS无法在JSFiddle中运行？ - Why is my jQuery UI CSS not working in JSFiddle?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM