javaScript简单canvas实现

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

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <div>
   <div>
    <input type="radio" name="shap" id="circleButton" checked="true">circle</input>
    <input type="radio" name="shap" id="rectButton">rectangle</input>
    <input type="color"/>
   </div>
   <canvas id="myCanvas" style=" border:1px solid;" width="800" height="500"></canvas>
   </div>
</body>
<script language="JavaScript">
  var shap = 0; //0 is circle; 1 is rectangle
  var orignalX, orignalY;//the coordinate of mouse down
  var lastX, lastY;//the coordinate of last mouse position
  var isMouseDown = false; // flag of mouse pressing down
  var circleButton = document.getElementById("circleButton");
  var rectButton = document.getElementById("rectButton");
  var myCanvas = document.getElementById("myCanvas");
  var context = myCanvas.getContext('2d');
  var width = myCanvas.width, height = myCanvas.height;
  var data;//storing last canvas' content
  context.strokeStyle = "red";
  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;
   }
  }

  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>