app嵌套html橡皮筋效果,HTML5实现一根拉伸的橡皮筋

鼠标事件

var ctx;

var linew=10;

var color="rgb(255,0,0)";

var isClick;

var mx=50;

var my=200;

var tid;

function setstyle(w,c){

ctx.lineWidth = w;

ctx.strokeStyle = c;

}

function getpoint(ev){

if(ev.layerX ||ev.layerX ==0)

{

mx = ev.layerX;

my = ev.layerY;

}

else if(ev.offsetX || ev.offsetX == 0 )

{

mx = ev.offsetX;

my = ev.offsetY;

}

}

function drawall(){

ctx.clearRect(0,0,400,400);

setstyle(linew,color);

ctx.beginPath();

ctx.moveTo(50,200);

ctx.lineTo(mx,my);

ctx.lineTo(350,200);

ctx.stroke();

setstyle(2,"rgb(0,0,0)");

ctx.strokeRect(0,0,400,400);

}

function init(){

isClick = false;

ctx=document.getElementById('canvas').getContext('2d');

drawall();

canvas1=document.getElementById('canvas');

canvas1.addEventListener("mousedown",findball,false);

canvas1.addEventListener("mousemove",moveit,false);

canvas1.addEventListener("mouseup",finish,false);

}

function findball(ev){

isClick=true;

document.f.lg.value = "mousedown";

getpoint(ev);

drawall();

}

function moveit(ev){

if (isClick){

document.f.lg.value = "mousemove";

getpoint(ev);

drawall();

}

}

function finish(){

if(isClick){

isClick=false;

document.f.lg.value="mouseup";

tid=setInterval(change,100);

}

}

function change(){

if(my>200){

my -= 10;

if(my <= 200){

my = 200;

clearInterval(tid);

}

}

if(my<200){

my += 10;

if(my >= 200){

my =200;

clearInterval(tid);

}

}

drawall();

}

LOG: