HTML5 Canvas 制作一个“在线画板”

最新推荐文章于 2024-05-23 14:24:57 发布

qq_36106235

最新推荐文章于 2024-05-23 14:24:57 发布

阅读量2k

点赞数 1

分类专栏： html5 文章标签： html5 canvas

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>PHP100.com HTML5视频教程-canvas-在线画板</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <style type="text/css">
    #php100{ border:1px solid #ccc;}  /* 画布的边 */
  </style>
</head>
<body>
  <canvas id="php100" width="500" height="400"></canvas>
  <!-- 画布 -->
<script type="text/javascript">
      var canvas = document.getElementById('php100'); //获取画布
      var p100=canvas.getContext("2d");  //设置模式
 	    p100.lineWidth=10;   //线粗
	    p100.strokeStyle="red";  //线条填充样式
      var pp=false; //开始为false 当鼠标按下时才能画图


      //当鼠标按下时 pp为true才能画图
    $("#php100").mousedown(function(e){   //鼠标按下事件 e自定义的变量 表示获得当前鼠标的对象
    var mouseX = e.pageX - this.offsetLeft; //当前页面鼠标的X轴坐标 - 当前画布距离页面左边界的距离
    var mouseY = e.pageY - this.offsetTop;
     pp=true;
     p100.moveTo(mouseX,mouseY); //起始位置
  });

      //当鼠标抬起时  pp设置为false 结束画图
     $("#php100").mouseup(function(e){  //鼠标弹起事件
       pp=false;  
  });

     //当鼠标移动时 
     $("#php100").mousemove(function(e){  //鼠标移动事件
      //重新获得鼠标当前的坐标
      var mouseX = e.pageX - this.offsetLeft;
      var mouseY = e.pageY - this.offsetTop;
      if(pp){
       p100.lineTo(mouseX,mouseY); //终止位置
       p100.stroke();				//结束图形
      }
  });



</script>
</body>

</html>

qq_36106235

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas 制作一个“在线画板”

PHP100.com HTML5视频教程-canvas-在线画板 #php100{ border:1px solid #ccc;} /* 画布的边 */ var canvas = document.getElementById('php100'); //获取画布 var p100=canvas.getContext("2d");
复制链接

扫一扫