canvas画板制作

2019-09-10 郑州网站建设  

<!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=http://www.divcss5.com/html5/"css/style.css">

</head>

 

<body>

  <script src=http://www.divcss5.com/html5/"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=http://www.divcss5.com/html5/"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://tzchb.ieyo.com/dede/1877.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • Canvas
  • !
  • hea