<!--<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正则表达式判断输入的是否为整数,谁给详解所用的正则表达式?
- 关于funtion 定义的疑惑
- 鸡毛信加急:如何使用ajax运行的结果
- 100分求用层覆盖textbox!!!
- 求正侧表达式IE5与IE6不同的解决方法(有解马上送分)
- jQuery ScrollPagination滚动时会重复加载数据,求解决办法 ?
- this的困惑???????????????????????????????????
- 对象不支持此属性或方法。急急,解决立刻给分!
- 为什么onchange在form中没反应呢?去掉form有可以用
- svg转画布有时可以有时不行
- 手机页面左右滑动跳转页面
- 求助: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>是这个效果吗 拖拽就不知道了
恩恩,谢谢你,拖拽我自己再想