用HTML5设置两个画布正方形到画布的中心
Set two canvas squares to the center of a canvas with HTML5
我在画布上放置了两个框,我想把它们居中。你可以在JS上查看:http://jsfiddle.net/FVU47/5/
我的画布高度为1000,宽度为1000,如下所示:
<canvas id="myCanvas" width="1000" height="1000" style="border:3px solid #385D8A; outline:1px solid #7592B5; margin-left: 0px; margin-top: 0px; background-color: #B9CDE5"></canvas>
然后我尝试用以下代码将两个框居中,这将放置box1或box2在画布的中心,这取决于我是单击"转到框1"还是"转到框2"(参见JSFiddle结果象限的底部:
$(document).ready(function(){
$("#box1click").click(function(){
if (rect1.x <= 500) {
positionWidthSet = Math.abs(rect1.x - canvas.width/2) + rect1.x;
}
else{
positionWidthSet = Math.abs(Math.abs(rect1.x - canvas.width/2) + rect1.x)
}
if (rect1.y >= 500) {
positionHeightSet = Math.abs(rect1.y -canvas.height/2);
}
else{
positionHeightSet = Math.abs(Math.abs(rect1.y - canvas.height/2) + rect1.y);
}
positionCanvasContext(positionWidthSet,positionHeightSet);
});
});
$(document).ready(function(){
$("#box2click").click(function(){
if (rect2.x <= 500) {
positionWidthSet = Math.abs(rect2.x - canvas.width/2) + rect2.x;
}
else{
positionWidthSet = Math.abs(Math.abs(rect2.x - canvas.width/2) + rect2.x)
}
if (rect2.y >= 500) {
positionHeightSet = Math.abs(rect2.y -canvas.height/2);
}
else{
positionHeightSet = Math.abs(Math.abs(rect2.y - canvas.height/2) + rect2.y);
}
positionCanvasContext(positionWidthSet,positionHeightSet);
});
});
目前,点击"Go to Box 1"或"Go to Box 2"都不会使画布围绕Box 1或Box 2居中,尽管在控制台中试验我的公式似乎表明情况并非如此。
有一种方法:http://jsfiddle.net/m1erickson/GpMsk/
把你所有的rects放在一个数组中:
var rects=[];
rects.push({
x: 103,
y: 262,
w: 200,
h: 100,
fillStyle: 'red',
hovered: false
});
rects.push({
x: 484,
y: 170,
w: 200,
h: 100,
fillStyle: 'blue',
hovered: false
});
创建一个draw()函数,绘制rects[]数组中的所有矩形
绘制具有指定x/y偏移量的所有矩形到其原始x/y:
function draw(offsetX,offsetY){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<rects.length;i++){
var r=rects[i];
ctx.fillStyle=r.fillStyle;
ctx.fillRect(r.x+offsetX,r.y+offsetY,r.w,r.h);
}
}
当您单击按钮时,计算将指定矩形拉到画布中心所需的偏移量
然后用计算的偏移量重新绘制所有矩形。
var centerX=canvas.width/2;
var centerY=canvas.height/2;
function centerThisRect(rectsIndex){
var r=rects[rectsIndex];
var offsetX=centerX-r.x-r.w/2;
var offsetY=centerY-r.y-r.h/2;
draw(offsetX,offsetY);
}
相关文章:
- JQuery合并了keyup和focusout两个函数
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 单击时切换两个图像
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 基于两个条件退出While循环
- 如何在这里将两个值最低的数字相加
- 组合两个javascript函数
- 如何使用offer/answer交换来自两个对等连接的流
- jsf中两个字符串的颜色代码差异
- 加载两个具有相同父密钥名称的json文件
- 在Qualtrics中,介绍如何动态连接两个滑块
- 访问$.ajax()函数中的两个不同数组
- 如何在three.js上添加两个向量
- webgl在一个正方形上操纵两个纹理
- javascript中两个正方形之间的碰撞检测
- 如何使用纯javascript和css(无jquery)调暗整个屏幕,除了两个同心正方形之间的区域
- 正方形内的两个三角形可点击区域
- 用HTML5设置两个画布正方形到画布的中心