动态改变html5中的矩形坐标 [英] dynamically changing rectangle coordinates in html5
本文介绍了动态改变html5中的矩形坐标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在html5中动态更改矩形坐标。这是我的代码。请任何人来电话
解决方案
>
< title>
#myCanvas {position：relative; }
#myCanvas {border：2px solid＃000; }
#myCanvas {position：absolute;顶部：5px;左：5px; }
您的浏览器不支持HTML5画布标签。
< br $>
//将所有内容保存在匿名函数中，在窗口加载时调用。
if（window.addEventListener） {
window.addEventListener（''load''，function（）{
var canvas，context，canvaso，contexto;
/////
var elem = document.getElementById（''myCanvas''）;
if（！elem ||！elem.getContext）{
返回;
}
//获取画布2d上下文。
var context = elem.getContext（''2d''）;
if（！context ||！context .drawImage）{
返回;
}
//创建一个新图像。
// var img = new Image（）;
// //一旦加载就在画布上绘制图像。
// img.addEventListener（''load''，function（）{
// //原始分辨率：x，y。
// context.drawImage（this，100,100）;
//
//}，false）;
// img.src =''c：\\Sunset.jpg'';
var canvas1 = document.getElementById（''myCanvas''）;
var context1 = canvas1.getContext（''2d''）;
var imageObj = new Image（）;
imageObj.onload = function（）{
context1.drawImage（imageObj，60,40）;
};
// imageObj.src =http://www.html5canvastutorials.com/ demos / assets / darth-vader.jpg;
imageObj.src =Sunset.jpg;
///// //
//活动工具实例。
var工具;
var tool_default =''rect '';
函数init（）{
//找到画布元素。
canvaso = document .getElementById（''myCanvas''）;
if（！canvaso）{
alert（''错误：我找不到画布元素！''）;
返回;
}
if（！canvaso.getContext）{
alert（''错误：没有canvas.getContext！''）;
返回;
}
//获取2D画布上下文。
contexto = canvaso.getContext（' '2d''）;
if（！contexto）{
alert（''错误：未能获得getContext！''）;
返回;
}
//添加临时画布。
var container = canvaso.parentNode;
canvas = document.createElement（''canvas''）;
if（！canvas）{
alert（''错误：我不能创建一个新的画布元素！''）;
返回;
}
canvas.id =' 'myCanvas'';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild（画布）;
context = canvas.getContext（'''2''）;
//获取工具选择输入。
var tool_select = document.getElementById（''Button1''）;
if（！tool_select）{
alert（''错误：未能获得dtool元素！''）;
返回;
}
tool_select.addEventListener（''change''，ev_tool_change，false）;
//激活默认工具。
if（tools [tool_default]）{
tool = new tools [tool_default]（）;
tool_select.value = tool_default;
}
//附上e mousedown，mousemove和mouseup事件监听器。
canvas.addEventListener（''mousedown''，ev_canvas，false）;
canvas.addEventListener（''mousemove''， ev_canvas，false）;
canvas.addEventListener（''mouseup''，ev_canvas，false）;
}
//通用事件处理程序。这个函数只确定鼠标
//相对于canvas元素的位置。
函数ev_canvas（ev）{
if（ev.layerX || ev.layerX == 0）{// Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
}否则if（ev.offsetX || ev.offsetX == 0）{// Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
//调用工具的事件处理程序。
var func =工具[ev.type];
if（func）{
func（ev）;
}
}
//对工具选择器所做的任何更改的事件处理程序。
函数ev_tool_change（ev）{
if（tools [this.v alue]）{
工具=新工具[this.value]（）;
}
}
//这个函数在#imageView上绘制#imageTemp画布，之后
// #imageTemp被清除。每次用户
//完成绘图操作时都会调用此函数。
函数img_update（）{
contexto.drawImage（canvas ，0,0）;
context.clearRect（0,0，canvas.width，canvas.height）;
}
//这个对象包含每个绘图工具的实现。
var tools = {};
//绘图铅笔。
tools.pencil = function（）{
var tool = this;
this.started = false;
//当你开始按住鼠标按钮时调用。
//这会启动铅笔画。
this.mousedown = function（ev）{
context.beginPath（）;
context.moveTo（ev._x，ev._y）;
tool.started = true;
};
//每次移动鼠标时都会调用此函数。显然，只有
//如果tool.started状态设置为true（当你按住
//鼠标按钮时）。
this.mousemove = function（ev）{
if（tool.started）{
context.lineTo（ev._x，ev._y）;
context.stroke（）;
}
};
//释放鼠标按钮时会调用此方法。
this.mouseup = function（ev）{
if（tool.started）{
tool.mousemove（ev）;
tool.started = false;
img_update（）;
}
};
};
//矩形工具。
到ols.rect = function（）{
var tool = this;
this.started = false;
this.mousedown = function（ev）{
tool.started = true;
tool.x0 = ev._x;
工具。 y0 = ev._y;
};
this.mousemove = function（ev）{
if （！tool.started）{
返回;
}
var x = Math.min（ev ._x，tool.x0），
y = Math.min（ev._y，tool.y0），
w = Math.abs（ev._x - tool.x0 ），
h = Math.abs（ev._y - tool.y0）;
context.clearRect（0,0，canvas。 width，canvas.height）;
if（！w || ！h）{
返回;
}
context.strokeRect（x，y，w，h ）;
};
this.mouseup = function（ev）{
if（tool.started） ）{
tool.mousemove（ev）;
tool.started = false;
img_update（）;
}
};
};
init（）;
}，false）;
}
// vim：set spell spl = en fo = wan1croql tw = 80 ts = 2 sw = 2 sts = 2 sta et ai cin fenc = utf-8 ff = unix：
< br $>
< br $>
// image
>
< title>
#myCanvas {position：relative; }
#myCanvas {border：2px solid＃000; }
#myCanvas {position：absolute;顶部：5px;左：5px; }
您的浏览器不支持HTML5画布标签。
//将所有内容保存在匿名函数中，在窗口加载时调用。
if（window.addEventListener）{
window.addEventListener（''load） ''，function（）{
var canvas，context，canvaso，contexto;
// ///
var elem = document.getElementById（''myCanvas''）;
if（！elem ||！elem。 getContext）{
返回;
}
//获取画布2d上下文。
var context = elem.getContext（''2d''）;
if（！context ||！context.drawImage）{
return;
}
//创建一个新图像。
// var img = new Image（）;
// //一旦它被加载就在画布上绘制图像。
// img.addEventListener（'''''，function（）{
// / /原始分辨率：x，y。
// context.drawImage（this，100,100）;
//
//} ，false）;
// img.src =''c：\\Sunset.jpg'';
var canvas1 = document.getElementById（''myCanvas'' ）;
var context1 = canvas1.getContext（'''2''）;
var imageObj = new Image（）;
imageObj.onload = function（）{
con text1.drawImage（imageObj，60,40）;
};
// imageObj.src =http://www.html5canvastutorials.com/demos/assets/ darth-vader.jpg;
imageObj.src =Sunset.jpg;
///////
//活动工具实例。
var工具;
var tool_default =''rect''; < br $>
函数init（）{
//找到画布元素。
canvaso = document.getElementById（' 'myCanvas''）;
if（！canvaso）{
alert（''错误：我找不到画布元素！''）;
返回;
}
if（！canvaso.getContext）{
alert（''错误：没有canvas.getContext！''）;
返回;
}
//获取2D画布上下文。
contexto = canvaso.getContext（'' 2d''）;
if（！contexto）{
alert（''错误：未能获得getContext！''）;
返回;
}
//添加临时画布。
var container = canvaso.parentNode;
canvas = document.createElement（''canvas''）;
if（！canvas）{
alert（''错误：我无法创建一个新的画布元素！''）;
返回;
}
canvas.id ='' myCanvas'';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild（画布）;
context = canvas.getContext（''2d''）;
//获取工具选择输入。
var tool_select = document.getElementById（''Button1''）;
if（！tool_select）{
alert（''错误：未能获得dtool元素！'' ）;
返回;
}
tool_select.addEventListener（''更改''，ev_tool_change，false）;
//激活默认工具。
if（tools [tool_default]）{
tool = new tools [tool_default]（） ;
tool_select.value = tool_default;
}
//附上mousedown，mousemove a nd mouseup事件监听器。
canvas.addEventListener（''mousedown''，ev_canvas，false）;
canvas.addEventListener（''mousemove''，ev_canvas，false） ;
canvas.addEventListener（''mouseup''，ev_canvas，false）;
}
/ /通用事件处理程序。这个函数只确定鼠标
//相对于canvas元素的位置。
函数ev_canvas（ev）{
if（ev.layerX || ev.layerX == 0）{// Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
}否则if（ev.offsetX || ev.offsetX == 0）{// Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
//调用工具的事件处理程序。
var func =工具[ev.type];
if（func）{
func（ev）;
}
}
//对工具选择器所做的任何更改的事件处理程序。
函数ev_tool_change（ev）{
if（tools [this.v alue]）{
工具=新工具[this.value]（）;
}
}
//这个函数在#imageView上绘制#imageTemp画布，之后
// #imageTemp被清除。每次用户
//完成绘图操作时都会调用此函数。
函数img_update（）{
contexto.drawImage（canvas ，0,0）;
context.clearRect（0,0，canvas.width，canvas.height）;
}
//这个对象包含每个绘图工具的实现。
var tools = {};
//绘图铅笔。
tools.pencil = function（）{
var tool = this;
this.started = false;
//当你开始按住鼠标按钮时调用。
//这会启动铅笔画。
this.mousedown = function（ev）{
context.beginPath（）;
context.moveTo（ev._x，ev._y）;
tool.started = true;
};
//每次移动鼠标时都会调用此函数。显然，只有
//如果tool.started状态设置为true（当你按住
//鼠标按钮时）。
this.mousemove = function（ev）{
if（tool.started）{
context.lineTo（ev._x，ev._y）;
context.stroke（）;
}
};
//释放鼠标按钮时会调用此方法。
this.mouseup = function（ev）{
if（tool.started）{
tool.mousemove（ev）;
tool.started = false;
img_update（）;
}
};
};
//矩形工具。
到ols.rect = function（）{
var tool = this;
this.started = false;
this.mousedown = function（ev）{
tool.started = true;
tool.x0 = ev._x;
工具。 y0 = ev._y;
};
this.mousemove = function（ev）{
if （！tool.started）{
返回;
}
var x = Math.min（ev ._x，tool.x0），
y = Math.min（ev._y，tool.y0），
w = Math.abs（ev._x - tool.x0 ），
h = Math.abs（ev._y - tool.y0）;
context.clearRect（0,0，canvas。 width，canvas.height）;
if（！w || ！h）{
返回;
}
context.strokeRect（x，y，w，h ）;
};
this.mouseup = function（ev）{
if（tool.started） ）{
tool.mousemove（ev）;
tool.started = false;
img_update（）;
}
};
};
init（）;
}，false）;
}
// vim：set spell spl = en fo = wan1croql tw = 80 ts = 2 sw = 2 sts = 2 sta et ai cin fenc = utf-8 ff = unix：
< br $>
< br $>
how to change rectangle coordinates dynamically in html5. here is my code.please any one tel me
解决方案>
<title>
#myCanvas { position: relative; }
#myCanvas { border: 2px solid #000; }
#myCanvas { position: absolute; top: 5px; left: 5px; }
Your browser does not support the HTML5 canvas tag.
// Keep everything in anonymous function, called on window load.
if (window.addEventListener) {
window.addEventListener(''load'', function () {
var canvas, context, canvaso, contexto;
/////
var elem = document.getElementById(''myCanvas'');
if (!elem || !elem.getContext) {
return;
}
// Get the canvas 2d context.
var context = elem.getContext(''2d'');
if (!context || !context.drawImage) {
return;
}
// Create a new image.
// var img = new Image();
// // Once it''s loaded draw the image on the canvas.
// img.addEventListener(''load'', function () {
// // Original resolution: x, y.
// context.drawImage(this, 100, 100);
//
// }, false);
// img.src = ''c:\\Sunset.jpg'';
var canvas1 = document.getElementById(''myCanvas'');
var context1 = canvas1.getContext(''2d'');
var imageObj = new Image();
imageObj.onload = function () {
context1.drawImage(imageObj, 60, 40);
};
// imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
imageObj.src = "Sunset.jpg";
///////
// The active tool instance.
var tool;
var tool_default = ''rect'';
function init() {
// Find the canvas element.
canvaso = document.getElementById(''myCanvas'');
if (!canvaso) {
alert(''Error: I cannot find the canvas element!'');
return;
}
if (!canvaso.getContext) {
alert(''Error: no canvas.getContext!'');
return;
}
// Get the 2D canvas context.
contexto = canvaso.getContext(''2d'');
if (!contexto) {
alert(''Error: failed to getContext!'');
return;
}
// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement(''canvas'');
if (!canvas) {
alert(''Error: I cannot create a new canvas element!'');
return;
}
canvas.id = ''myCanvas'';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);
context = canvas.getContext(''2d'');
// Get the tool select input.
var tool_select = document.getElementById(''Button1'');
if (!tool_select) {
alert(''Error: failed to get the dtool element!'');
return;
}
tool_select.addEventListener(''change'', ev_tool_change, false);
// Activate the default tool.
if (tools[tool_default]) {
tool = new tools[tool_default]();
tool_select.value = tool_default;
}
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener(''mousedown'', ev_canvas, false);
canvas.addEventListener(''mousemove'', ev_canvas, false);
canvas.addEventListener(''mouseup'', ev_canvas, false);
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
// The event handler for any changes made to the tool selector.
function ev_tool_change(ev) {
if (tools[this.value]) {
tool = new tools[this.value]();
}
}
// This function draws the #imageTemp canvas on top of #imageView, after which
// #imageTemp is cleared. This function is called each time when the user
// completes a drawing operation.
function img_update() {
contexto.drawImage(canvas, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
}
// This object holds the implementation of each drawing tool.
var tools = {};
// The drawing pencil.
tools.pencil = function () {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
// The rectangle tool.
tools.rect = function () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function (ev) {
if (!tool.started) {
return;
}
var x = Math.min(ev._x, tool.x0),
y = Math.min(ev._y, tool.y0),
w = Math.abs(ev._x - tool.x0),
h = Math.abs(ev._y - tool.y0);
context.clearRect(0, 0, canvas.width, canvas.height);
if (!w || !h) {
return;
}
context.strokeRect(x, y, w, h);
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
init();
}, false);
}
// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
//image
>
<title>
#myCanvas { position: relative; }
#myCanvas { border: 2px solid #000; }
#myCanvas { position: absolute; top: 5px; left: 5px; }
Your browser does not support the HTML5 canvas tag.
// Keep everything in anonymous function, called on window load.
if (window.addEventListener) {
window.addEventListener(''load'', function () {
var canvas, context, canvaso, contexto;
/////
var elem = document.getElementById(''myCanvas'');
if (!elem || !elem.getContext) {
return;
}
// Get the canvas 2d context.
var context = elem.getContext(''2d'');
if (!context || !context.drawImage) {
return;
}
// Create a new image.
// var img = new Image();
// // Once it''s loaded draw the image on the canvas.
// img.addEventListener(''load'', function () {
// // Original resolution: x, y.
// context.drawImage(this, 100, 100);
//
// }, false);
// img.src = ''c:\\Sunset.jpg'';
var canvas1 = document.getElementById(''myCanvas'');
var context1 = canvas1.getContext(''2d'');
var imageObj = new Image();
imageObj.onload = function () {
context1.drawImage(imageObj, 60, 40);
};
// imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
imageObj.src = "Sunset.jpg";
///////
// The active tool instance.
var tool;
var tool_default = ''rect'';
function init() {
// Find the canvas element.
canvaso = document.getElementById(''myCanvas'');
if (!canvaso) {
alert(''Error: I cannot find the canvas element!'');
return;
}
if (!canvaso.getContext) {
alert(''Error: no canvas.getContext!'');
return;
}
// Get the 2D canvas context.
contexto = canvaso.getContext(''2d'');
if (!contexto) {
alert(''Error: failed to getContext!'');
return;
}
// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement(''canvas'');
if (!canvas) {
alert(''Error: I cannot create a new canvas element!'');
return;
}
canvas.id = ''myCanvas'';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);
context = canvas.getContext(''2d'');
// Get the tool select input.
var tool_select = document.getElementById(''Button1'');
if (!tool_select) {
alert(''Error: failed to get the dtool element!'');
return;
}
tool_select.addEventListener(''change'', ev_tool_change, false);
// Activate the default tool.
if (tools[tool_default]) {
tool = new tools[tool_default]();
tool_select.value = tool_default;
}
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener(''mousedown'', ev_canvas, false);
canvas.addEventListener(''mousemove'', ev_canvas, false);
canvas.addEventListener(''mouseup'', ev_canvas, false);
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
// The event handler for any changes made to the tool selector.
function ev_tool_change(ev) {
if (tools[this.value]) {
tool = new tools[this.value]();
}
}
// This function draws the #imageTemp canvas on top of #imageView, after which
// #imageTemp is cleared. This function is called each time when the user
// completes a drawing operation.
function img_update() {
contexto.drawImage(canvas, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
}
// This object holds the implementation of each drawing tool.
var tools = {};
// The drawing pencil.
tools.pencil = function () {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
// The rectangle tool.
tools.rect = function () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function (ev) {
if (!tool.started) {
return;
}
var x = Math.min(ev._x, tool.x0),
y = Math.min(ev._y, tool.y0),
w = Math.abs(ev._x - tool.x0),
h = Math.abs(ev._y - tool.y0);
context.clearRect(0, 0, canvas.width, canvas.height);
if (!w || !h) {
return;
}
context.strokeRect(x, y, w, h);
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
init();
}, false);
}
// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
这篇关于动态改变html5中的矩形坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
