canvas画图小程序

最新推荐文章于 2023-01-05 16:14:09 发布

fighting_today_cui

最新推荐文章于 2023-01-05 16:14:09 发布

阅读量1.6k

点赞数 1

分类专栏： css web html 文章标签： css3 canvas

本文链接：https://blog.csdn.net/qq_34109078/article/details/72869333

版权

web 同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

之前学习h5和css3大部分时间都是看书，看完了没啥感觉，最近在联系各种demo，感觉虽然敲代码会让你觉得学得慢，但是学的劳呀，而且做出了想要的demo那成就感真实棒棒哒！
下面就是我学习canvas写的画图小程序demo参考了航哥学习h5和css3可以好好跟着他练习

<!DOCTYPE>
<html>
    <head>
        <title>canvas画图小程序</title>
        <meta charset="UTF-8">
        <meta name="keywords" content="canvas"/>
        <meta name="description" content="canvas画图"/>
        <meta name="author" content="王翠" />
       <meta name="viewport" content="width=device-width initial-scale=1.0" />
  </head>

  <style>
  *{
    margin: 0;
    padding: 0;
  }
  .wrap{
    width: 500px;
    height:500px;
    padding: 10px 0;
    margin: 0 auto;
    text-align: center;
  }
  .main-header{
    display:flex;
    padding: 10px 0;
  }
  #canvas{
    border:1px solid #000;
  }

  .main-color,.main-size{
    width:250px;
    height: 80px;
    background-color: #ccc;
    border:1px solid #ccf;
    text-align: center;
    padding: 10px 0;
  }
  .main-color ul li,.main-size ul li{
   display: flex;
   list-style: none;
   width: 30px;
   height:30px;
   padding: 5px;
   margin: 0 10px 0 0;
   justify-content:center;
   align-items:center;
  }
  .main-color ul ,.main-size ul {
    padding: 10px 0;
    display: flex;
    justify-content:center;
  }
  .redColor{
    background-color: rgba(255,0,0,1);
  }
  .blueColor{
    background-color: rgba(255,0,247,1);
  }
  .yellowColor{
    background-color: rgba(255,235,59,1);
  }
  .main-color ul li:hover,.main-size ul li:hover {
   border:1px solid #000;
   opacity:0.5;
  }

  .smallLine{
    width:20px;
    height:20px;
    display: block;

    border-radius: 100%;
    background-color:#607d8b;
  }

  .middleLine{
    width:25px;
    height:25px;
    display: block;
    border-radius: 100%;
    background-color:#607d8b;
  }
  .largeLine{
    width:30px;
    height:30px;
    display: block;
    border-radius: 100%;
    background-color:#607d8b;
  }
  #showImg{
    display: none;
  }
  </style>
  <script type="text/javascript">
    window.onload = function(){

      canvas = document.getElementById('canvas');
      context = canvas.getContext('2d');
      canvas.onmousedown = startDrawing;
      canvas.onmouseup = stopDrawing;
      canvas.onmousemove = isDrawing;
      var isDrawing=false;
      // 开始画图
      function startDrawing(e){
        isDrawing=true;
        // 创建一个绘图路径
        context.beginPath();
        // 把画笔移到鼠标位置
        context.moveTo(e.pageX - canvas.offsetLeft,e.pageY -canvas.offsetTop)
      }
      // 画图中
      function isDrawing(e){
        if(isDrawing){
          // v找到鼠标的最新位置
          x = e.pageX - canvas.offsetLeft;
          y = e.pageY -canvas.offsetTop;
          context.lineTo(x,y);
          context.stroke();
        }
      }
      // 停止画图
      function stopDrawing(){
        isDrawing=false;
      }    
  } 
  // 改变颜色
  function changeColor(that){
    // 获取当前选中元素的父元素，先统一清空其他li的边框    
    var chilNodes=that.parentNode.childNodes;
    var j=chilNodes.length;
    for (i=0;i<j;i++)
      // 过滤节点中的文本节点
      if(chilNodes[i].nodeType!==3){
        chilNodes[i].style.border = '';
      }
    that.style.border = '1px #000 solid';
    //获取当前选择区域的颜色，这里用了计算属性,可能是背景颜色是通过类名设置的，直接用.style获取不到
    var thatColor = window.getComputedStyle(that, null).backgroundColor
    context.strokeStyle = thatColor;
  }
   // 画笔粗细
  function changeSize(temp,that){
    // 由于点击的元素是a所以取ul得两次获取父节点
    var chilNodes=that.parentNode.parentNode.childNodes;
    var j=chilNodes.length;
    for (i=0;i<j;i++)
      if(chilNodes[i].nodeType!==3){
        chilNodes[i].style.border = '';
      }   
    that.parentNode.style.border = '1px #000 solid'
     context.lineWidth = temp;
  }
   // 保存画布
  function saveCanvas(){
    var img = document.getElementById('img')
    var showImg = document.getElementById('showImg')
    img.src = canvas.toDataURL();
    showImg.style.display = 'block';
  }       
  // 清除画布
  function clearCanvas(){
    context.clearRect(0,0,canvas.width,canvas.width);
    var showImg = document.getElementById('showImg');
    showImg.style.display = 'none';
  } 
  </script>
    <body>
    <div class='wrap'>
        <h3>canvas画图小程序</h3>
      <div class='main-header'>
        <div class="main-color">
          <h3>画笔颜色</h3>
          <ul>
            <li class='redColor' onclick="changeColor(this)"></li>
            <li class='blueColor'onclick="changeColor(this)"></li>
            <li class='yellowColor'onclick="changeColor(this)"></li>
          </ul>
        </div>
        <div class="main-size">
          <h3>画笔粗细</h3>
          <ul>
            <li ><a class='smallLine' href='javascript:void(0)' alt="细" onclick="changeSize('3',this)"></a></li>
            <li ><a class='middleLine' href='javascript:void(0)' alt="中" onclick="changeSize('6',this)"></a></li>
            <li ><a class='largeLine' href='javascript:void(0)' alt="粗"  onclick="changeSize('10',this)"></a></li>
          </ul>
        </div>
      </div>
      <canvas id="canvas" width="500px" height="300px"></canvas>
      <div class="main-footer">
        <button onclick="clearCanvas()">清除画布</button>
        <button onclick="saveCanvas()">保存画布</button>
        <div class="saveImg" id="showImg" style='width:500px;height:300px'>
          <img id="img">
          <span>点击右键保存......</span>
        </div>        
      </div>

    </div>
    </body>
</html>

效果图如下
canvas画图小程序

fighting_today_cui

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
canvas画图小程序

之前学习h5和css3大部分时间都是看书，看完了没啥感觉，最近在联系各种demo，感觉虽然敲代码会让你觉得学得慢，但是学的劳呀，而且做出了想要的demo那成就感真实棒棒哒！下面就是我学习canvas写的画图小程序demo参考了航哥学习h5和css3可以好好跟着他练习<!DOCTYPE><html> <head> <title>canvas画图小程序</title>
复制链接

扫一扫