您的位置: 首页 > IT文章 > javaScript简单canvas实现

javaScript简单canvas实现

分类: IT文章 • 2024-09-14 11:04:01

功能：选择圆形或者矩形，在定义好的画布上作画

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <div>
   <div>
    <input type="radio" name="shap" ;
  context.strokeWidth=1;

  function circleButtonClick() {
   shap = 0;
  }

  function rectButtonClick() {
   shap = 1;
  }

  function myCanvasMouseDown(event) {
   //event.preventDefault();
   if(event.button == 0) {
    orignalX = event.offsetX;
    orignalY = event.offsetY;
    data = context.getImageData(0, 0, width, height);
    isMouseDown = true;
   }
  }

  function myCanvasMouseMove(event) {
   if (isMouseDown){
    //event.preventDefault();
    context.clearRect(0,0,width,height);
    context.putImageData(data,0,0);
    lastX = event.offsetX;
    lastY = event.offsetY;
    switch(shap){
     case 0:
      context.beginPath();
      context.arc(orignalX+(lastX-orignalX)/2,orignalY+(lastY-orignalY)/2,Math.abs(lastX-orignalX)/2,0,Math.PI * 2,true);
      context.stroke();
      context.closePath();
      break;
     case 1:
      context.strokeRect(orignalX, orignalY, lastX-orignalX, lastY-orignalY);
      break;
    }
   }
  }

  function myCanvasMouseUp(event) {
   if (isMouseDown){
    //event.preventDefault();
    context.clearRect(0,0,width,height);
    context.putImageData(data,0,0);
    lastX = event.offsetX;
    lastY = event.offsetY;
    switch(shap){
     case 0:
      context.beginPath();
      context.arc(orignalX+(lastX-orignalX)/2,orignalY+(lastY-orignalY)/2,Math.abs(lastX-orignalX)/2,0,Math.PI * 2,true);
      context.stroke();
      context.closePath();
      break;
     case 1:
      context.strokeRect(orignalX, orignalY, lastX-orignalX, lastY-orignalY);
    }

    isMouseDown = false;
    lastX = null;
    lastY = null;
   }
  }

  circleButton.addEventListener("click", circleButtonClick, false);
  rectButton.addEventListener("click", rectButtonClick, false);
  myCanvas.addEventListener("mousedown", myCanvasMouseDown, false);
  myCanvas.addEventListener("mousemove", myCanvasMouseMove, false);
  myCanvas.addEventListener("mouseup", myCanvasMouseUp, false);
</script>
<script language="JavaScript">
  alert(shap);
</script>
</html>