canvas创建画板

最新推荐文章于 2024-05-08 16:38:56 发布

万能守恒定律

最新推荐文章于 2024-05-08 16:38:56 发布

阅读量337

点赞数 1

分类专栏： h5+c3 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_50951790/article/details/127743495

版权

h5+c3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.本期是讲解如何用canvas创建一个画板

详情步骤代码中都有注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
        <!-- 一个canvas容器 -->
        <canvas id="mycanvas" width="800px" height="500px" style="border: 1px solid pink;"></canvas>
<script>
  // 获取节点
  var mycanvas = document.getElementById("mycanvas");
  //   赋给2D属性
  var cxt = mycanvas.getContext("2d");
  //修改偏移量
  var offleft = mycanvas.offsetLeft;
  var offtop = mycanvas.offsetTop;
  //绑定鼠标事件 点击按下
  mycanvas.onmousedown=function(e){
      // 定义坐标
      cxt.moveTo(e.clientX,e.clientY);
      //   移动
      mycanvas.onmousemove=function(e){
          // 定义路径
          cxt.lineTo(e.clientX-offleft,e.clientY-offtop);
          //  绘制当前路径   stroke()方法会实际地绘制出通过 moveTo() 和 lineTo()方法定义的路径
          cxt.stroke();
      }
      //鼠标移出时赋予空值，完成绘制   
      mycanvas.onmouseup = function(){
          mycanvas.onmousemove = null;
      }
  }
</script>
</body>
</html>

效果图如下