<!DOCTYPE HTML>
<html lang="zh">
<script type="text/javascript" src="JS/JQ.js"></script> //JQ引用 别忘了
<style>
@charset "utf-8";
/* CSS Document */
body{background:#ffffff;}
body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,fieldset,hr,div{margin:0; padding:0;}
body, input,select,textarea{color:#000; font:12px/1.8 "微软雅黑",Arial, Helvetica, sans-serif;}
img{border:0; vertical-align:middle;}
table{width:100%; border:0; border-collapse:collapse; border-spacing:0;}
ul,ol,li{list-style-type:none;}
a{color:#000; outline:none; text-decoration:none;}
a:hover{text-decoration:underline;}
</style>
<body>
<canvas id="myCanvas" height="300px" width="500px" style="margin:100px 700px; border:1px solid #666; background:#699;">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=$("#myCanvas").get(0);
var _canvas=$("#myCanvas").get(0).getContext("2d");
var _ifstart=false;
var _B_x=0;
var _B_y=0;
function can_click(){
};
function start(){
$("canvas").mousedown(function(e){
_B_x=parseInt(e.pageX)-700;
_B_y=parseInt(e.pageY)-100;
$(this).bind("mousemove",function(e){
var _x=parseInt(e.pageX)-700;
var _y=parseInt(e.pageY)-100;
canvas.width=500;
canvas.height=300;
_canvas.moveTo(_B_x,_B_y);
_canvas.lineTo(_B_x,_y);
_canvas.moveTo(_B_x,_B_y);
_canvas.lineTo(_x,_B_y);
_canvas.moveTo(_x,_B_y);
_canvas.lineTo(_x,_y);
_canvas.moveTo(_B_x,_y);
_canvas.lineTo(_x,_y);
_canvas.stroke();
});
}).mouseup(function(e){
$(this).unbind("mousemove");
});
};
$(document).ready(function(e) {
start();
});
</script>
</body>
</html>
实现一个类似 桌面 鼠标左键点击拖动 出现拉伸框的效果
类似取得框的属性 Canvas提供有strokeRect(5,5,490,390); （start_X,start_Y,End_X,End_Y）;
扫一扫
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
