欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

  <title>canvas画板制作</title>

<meta name="keywords" content=" canvas画板制作" />

<meta name="description" content=" canvas画板制作" />

         <link rel="stylesheet" href="css/style.css">

</head>

 

<body>

  <script src="http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js"></script>

<canvas id="canvas" width=300 height=300></canvas></br>

<button id="pen">画图</button>

<button id="eraser">橡皮擦</button>

 

<script src="js/index.js"></script>

 

</body>

</html>

Css部分:

body{ background-color: ivory; }

canvas{border:1px solid red;}

js部分:

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var lastX;

var lastY;

var strokeColor="red";

var strokeWidth=5;

var mouseX;

var mouseY;

var canvasOffset=$("#canvas").offset();

var offsetX=canvasOffset.left;

var offsetY=canvasOffset.top;

var isMouseDown=false;

 

 

function handleMouseDown(e){

  mouseX=parseInt(e.clientX-offsetX);

  mouseY=parseInt(e.clientY-offsetY);

 

  // Put your mousedown stuff here

  lastX=mouseX;

  lastY=mouseY;

  isMouseDown=true;

}

 

function handleMouseUp(e){

  mouseX=parseInt(e.clientX-offsetX);

  mouseY=parseInt(e.clientY-offsetY);

 

  // Put your mouseup stuff here

  isMouseDown=false;

}

 

function handleMouseOut(e){

  mouseX=parseInt(e.clientX-offsetX);

  mouseY=parseInt(e.clientY-offsetY);

 

  // Put your mouseOut stuff here

  isMouseDown=false;

}

 

function handleMouseMove(e){

  mouseX=parseInt(e.clientX-offsetX);

  mouseY=parseInt(e.clientY-offsetY);

 

  // Put your mousemove stuff here

  if(isMouseDown){

    ctx.beginPath();

    if(mode=="pen"){

      ctx.globalCompositeOperation="source-over";

      ctx.moveTo(lastX,lastY);

      ctx.lineTo(mouseX,mouseY);

      ctx.stroke();    

    }else{

      ctx.globalCompositeOperation="destination-out";

      ctx.arc(lastX,lastY,8,0,Math.PI*2,false);

      ctx.fill();

    }

    lastX=mouseX;

    lastY=mouseY;

  }

}

 

$("#canvas").mousedown(function(e){handleMouseDown(e);});

$("#canvas").mousemove(function(e){handleMouseMove(e);});

$("#canvas").mouseup(function(e){handleMouseUp(e);});

$("#canvas").mouseout(function(e){handleMouseOut(e);});

 

var mode="pen";

$("#pen").click(function(){ mode="pen"; });

$("#eraser").click(function(){ mode="eraser"; });

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html5/h15192.shtml