<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<!DOCTYPE html>
<html>
<head>
<title> Canvas Demo</title>
<!--[if It IE]>
<script type="text/javascript" src="./excanvas.js"></script>
<![endif]-->
<script>
//初始化
var canvas;
window.onload=function() {
canvas = document.getElementById('cvs');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle='blue';
// -----------------------------
ctx.beginPath();
ctx.rect(10,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(70,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(130,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(190,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(250,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(310,10,50,50);
ctx.fill();
//----------------------------------------
//----------------------------------------
//line2
ctx.beginPath();
ctx.rect(10,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(70,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(130,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(190,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(250,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(310,70,50,50);
ctx.fill();
//添加事件响应
canvas.addEventListener('click', function(e){
p = getEventPosition(e);
// ctx.clearRect(0,0,360,120);
reDraw(p,ctx);
}, false);
}
}
//得到点击的坐标
function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
var arr = [
{x:10, y:10, width:50, height:50},
{x:70, y:10, width:50, height:50},
{x:130, y:10, width:50, height:50},
{x:190, y:10, width:50, height:50},
{x:250, y:10, width:50, height:50},
{x:310, y:10, width:50, height:50},
{x:10, y:70, width:50, height:50},
{x:70, y:70, width:50, height:50},
{x:130, y:70, width:50, height:50},
{x:190, y:70, width:50, height:50},
{x:250, y:70, width:50, height:50},
{x:310, y:70, width:50, height:50}
];
//重绘
function reDraw(p,ctx){
var whichObject = [];
var zoom = parseInt(canvas.style.zoom || 100)/100;
for(var i=0; i < arr.length; i++){
if(p && (arr[i].x*zoom + arr[i].width*zoom) >= p.x && p.x >= arr[i].x
&& (arr[i].y*zoom + arr[i].height*zoom) >= p.y && p.y >= arr[i].y){
whichObject.push(i);
if(arr[i].selected){
ctx.fillStyle='blue';
arr[i].selected = false;
} else {
ctx.fillStyle='red';
arr[i].selected = true;
}
ctx.beginPath();
ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);
ctx.fill();
break;
}
}
}
</script>
<script>
function ZoomImg(o)
{
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if(zoom > 10)
o.style.zoom = zoom + '%';
return false;
}
</script>
</head>
<body>
<canvas onmousewheel="return ZoomImg(this)" id="cvs" width="400" height="200" style="background:#8D8D8D" ></canvas>
</body>
</html>
解决方案 »
- JS onclick函数在FireFox中可以,在IE中不行,请教!
- 跪求解决办法extjs
- jquser+javascript,ajax问题
- 麻烦大家给讲解下这是什么意思
- js调用ocx接口
- 求助<s:iterator>中的#L.index的用法问题
- 在CSS里面 background-image:url("td_test.gif"); 可否定义显示出来的背景是“拉伸”效果充满TD
- 如何用javascript转发地址?
- 在页面中嵌入iframe,可以让iframe的长度随着其中的内容增多而自动加长嘛,不想出现滚动条。请指教!
- 一个JS与JSP结合的问题
- 手机页面左右滑动跳转页面
- 求助:javascript的function中不能为两个input赋值
<!DOCTYPE html>
<html>
<head>
<title> Canvas Demo</title>
<!--[if It IE]>
<script type="text/javascript" src="./excanvas.js"></script>
<![endif]-->
<script>
//初始化
var canvas;
var ctx;
var zoom = 1;
window.onload=function() {
canvas = document.getElementById('cvs');
if (canvas.getContext){
ctx = canvas.getContext('2d');
ctx.fillStyle='blue';
// -----------------------------
ctx.beginPath();
ctx.rect(10,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(70,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(130,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(190,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(250,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(310,10,50,50);
ctx.fill();
//----------------------------------------
//----------------------------------------
//line2
ctx.beginPath();
ctx.rect(10,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(70,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(130,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(190,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(250,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(310,70,50,50);
ctx.fill();
//添加事件响应
canvas.addEventListener('click', function(e){
p = getEventPosition(e);
// ctx.clearRect(0,0,360,120);
reDraw(p,ctx);
}, false);
}
}
//得到点击的坐标
function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
var arr = [
{x:10, y:10, width:50, height:50},
{x:70, y:10, width:50, height:50},
{x:130, y:10, width:50, height:50},
{x:190, y:10, width:50, height:50},
{x:250, y:10, width:50, height:50},
{x:310, y:10, width:50, height:50},
{x:10, y:70, width:50, height:50},
{x:70, y:70, width:50, height:50},
{x:130, y:70, width:50, height:50},
{x:190, y:70, width:50, height:50},
{x:250, y:70, width:50, height:50},
{x:310, y:70, width:50, height:50}
];
//重绘
function reDraw(p,ctx){
var whichObject = [];
for(var i=0; i < arr.length; i++){
if(p && (arr[i].x*zoom + arr[i].width*zoom) >= p.x && p.x >= arr[i].x
&& (arr[i].y*zoom + arr[i].height*zoom) >= p.y && p.y >= arr[i].y){
whichObject.push(i);
if(arr[i].selected){
ctx.fillStyle='blue';
arr[i].selected = false;
} else {
ctx.fillStyle='red';
arr[i].selected = true;
}
ctx.beginPath();
ctx.rect(arr[i].x*zoom,arr[i].y*zoom, arr[i].width*zoom,arr[i].height*zoom);
ctx.fill();
break;
}
}
}
function ZoomImg(o)
{
var _zoom = zoom;
_zoom += (event.wheelDelta / 12)/100;
_zoom = parseFloat(_zoom.toFixed(1));
if(_zoom > 0.5){
zoom = _zoom;
//o.style.zoom = zoom + '%';
//o.width = o.width * zoom;
//o.height = o.height * zoom;
//o.style.zoom = 1;
var p;
ctx.clearRect(0,0,400,200);
for(var i = 0 ; i < arr.length ; i++){
p = arr[i];
if(p.selected){
ctx.fillStyle='red';
} else {
ctx.fillStyle='blue';
}
ctx.beginPath();
ctx.rect(p.x * zoom,p.y * zoom,p.width * zoom,p.height * zoom);
ctx.fill();
}
}
return false;
}
</script>
</head>
<body>
<canvas onmousewheel="return ZoomImg(this)" id="cvs" width="400" height="200" style="background:#8D8D8D" ></canvas>
</body>
</html>是这个效果吗 拖拽就不知道了
<!DOCTYPE html>
<html>
<head>
<title> Canvas Demo</title>
<!--[if It IE]>
<script type="text/javascript" src="./excanvas.js"></script>
<![endif]-->
<script>
//初始化
var canvas;
var ctx;
var zoom = 1;
window.onload=function() {
canvas = document.getElementById('cvs');
if (canvas.getContext){
ctx = canvas.getContext('2d');
ctx.fillStyle='blue';
// -----------------------------
ctx.beginPath();
ctx.rect(10,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(70,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(130,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(190,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(250,10,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(310,10,50,50);
ctx.fill();
//----------------------------------------
//----------------------------------------
//line2
ctx.beginPath();
ctx.rect(10,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(70,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(130,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(190,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(250,70,50,50);
ctx.fill();
ctx.beginPath();
ctx.rect(310,70,50,50);
ctx.fill();
//添加事件响应
canvas.addEventListener('click', function(e){
p = getEventPosition(e);
// ctx.clearRect(0,0,360,120);
reDraw(p,ctx);
}, false);
}
}
//得到点击的坐标
function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
}else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
var arr = [
{x:10, y:10, width:50, height:50},
{x:70, y:10, width:50, height:50},
{x:130, y:10, width:50, height:50},
{x:190, y:10, width:50, height:50},
{x:250, y:10, width:50, height:50},
{x:310, y:10, width:50, height:50},
{x:10, y:70, width:50, height:50},
{x:70, y:70, width:50, height:50},
{x:130, y:70, width:50, height:50},
{x:190, y:70, width:50, height:50},
{x:250, y:70, width:50, height:50},
{x:310, y:70, width:50, height:50}
];
//重绘
function reDraw(p,ctx){
var whichObject = [];
for(var i=0; i < arr.length; i++){
if(p && (arr[i].x*zoom + arr[i].width*zoom) >= p.x && p.x >= arr[i].x
&& (arr[i].y*zoom + arr[i].height*zoom) >= p.y && p.y >= arr[i].y){
whichObject.push(i);
if(arr[i].selected){
ctx.fillStyle='blue';
arr[i].selected = false;
} else {
ctx.fillStyle='red';
arr[i].selected = true;
}
ctx.beginPath();
ctx.rect(arr[i].x*zoom,arr[i].y*zoom, arr[i].width*zoom,arr[i].height*zoom);
ctx.fill();
break;
}
}
}
function ZoomImg(o)
{
var _zoom = zoom;
_zoom += (event.wheelDelta / 12)/100;
_zoom = parseFloat(_zoom.toFixed(1));
if(_zoom > 0.5){
zoom = _zoom;
//o.style.zoom = zoom + '%';
//o.width = o.width * zoom;
//o.height = o.height * zoom;
//o.style.zoom = 1;
var p;
ctx.clearRect(0,0,400,200);
for(var i = 0 ; i < arr.length ; i++){
p = arr[i];
if(p.selected){
ctx.fillStyle='red';
} else {
ctx.fillStyle='blue';
}
ctx.beginPath();
ctx.rect(p.x * zoom,p.y * zoom,p.width * zoom,p.height * zoom);
ctx.fill();
}
}
return false;
}
</script>
</head>
<body>
<canvas onmousewheel="return ZoomImg(this)" id="cvs" width="400" height="200" style="background:#8D8D8D" ></canvas>
</body>
</html>是这个效果吗 拖拽就不知道了
恩恩,谢谢你,拖拽我自己再想