<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas{
background: #eee;
}
</style>
</head>
<body>
<canvas id="qcanvas"></canvas>
<script type="text/javascript" src="./example/js/Qcanvas.js"></script>
<script type="text/javascript">
var qcanvas = new Qcanvas({
id:'qcanvas',
width:300,
height:200,
mousedown:function(e){
console.log(e);
console.log('canvas mousedown');
},
mousemove:function(){
console.log('canvas mousemove');
},
mouseup:function(){
console.log('canvas mouseup');
},
mouseout:function(){
console.log('canvas mouseout');
}
});
var layer = qcanvas.qlayer.layer();
var line1 = qcanvas.qline.line({
start:function(){return [100,50];},
end:[50,150],
color:'red',
like:'-',
withText:'可拖动',
drag:'vertical',
mouseout:function(e,position){
console.log(e);
console.log('line1 mouseout');
}
});
var line2 = qcanvas.qline.line({
start:function(){return [150,50];},
end:[0,20],
color:'blue',
like:'-',
withText:'可拖动',
mousemove:function(){
// console.log('dddd');
}
// drag:false
});
var line3 = qcanvas.qline.line({
start:function(){return [30,50];},
end:[150,60],
width:1,
like:'->',
color:'gray',
withText:'line3',
drag:false
});
layer.push(line3);
var line4 = qcanvas.qline.line({
start:function(){return [100,123];},
end:[150,180],
width:1,
like:'-->',
color:'gray',
withText:'line4',
withTextAlign:'left',
drag:false
});
var line5 = qcanvas.qline.line({
start:[250,50],
end:[200,200],
width:1,
like:'<-->',
color:'gray',
withText:'虚线双向箭头',
withTextAlign:'left',
// drag:false
});
var line6 = qcanvas.qline.line({
start:[120,50],
end:[140,200],
width:1,
like:'<->',
color:'blue',
withText:'实线双向箭头',
withTextAlign:'left',
// drag:false
});
</script>
</body>
</html>