圈子网格中的问题，javascript，html5 [英] problem in grid of circles ,javascript, html5
本文介绍了圈子网格中的问题，javascript，html5的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个圆圈网格，但它没有给我我想要的精确网格。 [0,0] - [0,100]和[0,0] - [100,0]之间的距离不同。
I am creating a grid of circles but it not giving me exact grid that i want. distance between [0,0]--[0,100] and [0,0]--[100,0] is different.
$(document).ready(function () {
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var playerImage = new Image();
playerImage.onload = function () {
var delta =100;
var i = 0;
var j = 0;
for (;i <= 500;) {
for (;j <= 500;) {
context.drawImage(this, j, i, 5, 5);
context.fillText("" + j + "," + i + "", i, j+20);
j = j + delta;
}
j = 0;
i = i + delta;
}
}
playerImage.src = "Images/player1.png";
});
-------- -
---------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/BkScript.js"></script>
<style>
#mainCanvas
{
width:500px;
height:500px;
background-color:#34ba74;
}
</style>
</head>
<body>
<div id="container">
<center>
<canvas id="mainCanvas"></canvas>
</center>
</div>
</body>
</html>
推荐答案
（document）.ready（function（）{
var canvas = document.getElementById（ mainCanvas）;
var context = canvas.getContext（ 2D）;
var playerImage = new Image（）;
playerImage.onload = function（）{
var delta = 100 ;
var i = 0 ;
var j = 0 ;
for （; i < = 500 ;）{
for （; j < = 500 ;）{
context.drawImage（ this ，j，i， 5 ， 5 ）;
context.fillText（ + j + ， + i + ，i，j + 20）;
j = j + delta;
}
j = 0 ;
i = i + delta;
}
}
playerImage.src = 图片/ player1.png;
}）;
(document).ready(function () { var canvas = document.getElementById("mainCanvas"); var context = canvas.getContext("2d"); var playerImage = new Image(); playerImage.onload = function () { var delta =100; var i = 0; var j = 0; for (;i <= 500;) { for (;j <= 500;) { context.drawImage(this, j, i, 5, 5); context.fillText("" + j + "," + i + "", i, j+20); j = j + delta; } j = 0; i = i + delta; } } playerImage.src = "Images/player1.png"; });
-------- -
---------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/BkScript.js"></script>
<style>
#mainCanvas
{
width:500px;
height:500px;
background-color:#34ba74;
}
</style>
</head>
<body>
<div id="container">
<center>
<canvas id="mainCanvas"></canvas>
</center>
</div>
</body>
</html>
使用css设置画布的宽度和高度时，会更改大小画布将显示在。但是，它不会更改画布将包含的像素数。
画布的默认大小（仅用1台机器/操作系统/浏览器测试 - win7 Chrome）为300x150px。
所以，当你设置css规则使其为500乘500，你在y方向上比x更加拉伸。这就是为什么这些点在Y方向上（视觉上）的距离是在X方向上的两倍。
对此有一个非常简单的解决方法。 br />
1）从css规则中删除宽度和高度
2）添加canvas.width = canvas.height = 500;在你获得画布的位置和获取其背景的位置之间。
样本：（已删除jQuery参考为了完整的例子和运行页面时的带宽，代码粘贴到模板blank.html我有） - 不要忘记更改图像源了！
When you set the width and height of the canvas using the css, it changes the size that the canvas will be displayed at. It does not however, change the number of pixels that the canvas will contain.
The default size for a canvas (only tested with 1 machine/os/browser - win7 Chrome) is 300x150px.
So, when you set the css rule to make it 500 by 500, you're stretching it more in the y direction than the x. This is why the points are (visually) twice as far apart in the Y direction than they are in the X.
There is a very simple fix for this.
1) Remove the width and height from the css rule
2) Addcanvas.width = canvas.height = 500;between where you get the canvas and where you get its context.
Sample: (removed jQuery reference for sake of a complete example and bandwidth when running page, code pasted into a template blank.html I have) - don't forget to change the image source back too!
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
var index=element.className.indexOf(newStr);
if ( index == -1)
element.className += ' '+newStr;
else
{
if (index != 0)
newStr = ' '+newStr;
element.className = element.className.replace(newStr, '');
}
}
function forEachNode(nodeList, func)
{
var i, n = nodeList.length;
for (i=0; i<n; i++)
{
func(nodeList[i], i, nodeList);
}
}
window.addEventListener('load', mInit, false);
function mInit()
{
var canvas = byId("mainCanvas");
canvas.width = canvas.height = 500;
var context = canvas.getContext("2d");
var playerImage = new Image();
playerImage.onload = function () {
var delta =100;
var i = 0;
var j = 0;
for (;i <= 500;) {
for (;j <= 500;) {
context.drawImage(this, j, i, 5, 5);
context.fillText("" + j + "," + i + "", i, j+20);
j = j + delta;
}
j = 0;
i = i + delta;
}
}
playerImage.src = "img/redBaron.jpg";
}
</script>
<style>
#mainCanvas
{
/* width:500px;
height:500px; */
background-color:#34ba74;
}
</style>
</head>
<body>
<div id="container">
<center>
<canvas id="mainCanvas"></canvas>
</center>
</div>
</body>
</html>这篇关于圈子网格中的问题，javascript，html5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
