Canvas写一个画板

最新推荐文章于 2024-05-05 20:17:09 发布

_xixi_nn

最新推荐文章于 2024-05-05 20:17:09 发布

阅读量574

点赞数 1

分类专栏： html css js 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_56674431/article/details/129958889

版权

html css js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

效果：

可以对线条的粗细、颜色进行调整
可以选择需要绘制的形状
是否填充形状
橡皮擦功能，可以调节橡皮擦的大小
清楚整个图像

解析代码：

1.建立canvas画板

一定要 getContext 创建画笔，后续操作都在画笔上进行！

<canvas id="can" width="400" height="400" style="border: 1px #000 solid;"></canvas>

let canv = document.getElementById("can");
let context = canv.getContext("2d");//创建画笔

2.选择绘制图形列表

draw点击事件，传递一个value值，默认问line，后续通过获取option的value值来做if判断，改变选择的形状

选择形状：
      <select name="shape" id="shape" onclick="draw(this.value)">
           <option value="line">线条</option>
           <option value="rect">矩形</option>
           <option value="arc">圆</option>
      </select>

let shape = document.getElementById("shape");    //形状
draw("line")
    function draw(shape){
      if(shape == "line"){
     
      }else if(shape == "rect"){
            
      }else if(shape == "arc"){
      
      }
           
    }

3.线条：改变颜色、粗细

利用input的color颜色选择器。用clientX、clientY获取到鼠标当前点击的位置，画笔开始的坐标就是我们鼠标的点击的位置，减去一个x、y轴的偏移量。

在鼠标移动中，持续获取鼠标位置，作为我们的画笔坐标，利用strokeStyle改变线条颜色，lineWidth改变线条粗细，分别获取到input框的value值即可。

 <form>
     设置线条颜色：<input type="color" id="color">
     设置线条粗细：<input class="line" type="number" id="line" max="100" min="1" value="1">
</form>

let color = document.getElementById("color");     //线条颜色
let line = document.getElementById("line");    //线条粗细
if(shape == "line"){
    canv.onmousedown=function(e){
          clientx=e.clientX;
          clienty=e.clientY;
          context.beginPath(); //绘制新的图形
          context.moveTo(clientx-canv.offsetLeft,clienty-canv.offsetTop);  //减少偏移
          canv.onmousemove=function(e){  //写在onmousedown里面
               clientx=e.clientX;
               clienty=e.clientY;
               context.strokeStyle=color.value;    //线条颜色
               context.lineWidth = line.value;    //线条粗细
               context.lineTo(clientx-canv.offsetLeft,clienty-canv.offsetTop);
               context.stroke();
           }
          canv.onmouseup=function(e){
                anv.onmousemove = null;
          }
    }
}

因为是鼠标按下开始事件，鼠标松开结束事件。

所以用onmousedown、onmousemove、onmouseup鼠标事件。

4.矩形、圆：生成固定大小矩形、圆，选择是否填充，选择填充颜色

是否填充：
         <select id="flag" value="0" >
                <option value="0" >否</option>
                <option value="1" >是</option>
         </select>
设置填充颜色：<input type="color" id="fillColor">

通过value值来获取，填充状态。如果不填充，那么就strokeRect画空的矩形，如果填充，那么就fillRect画实心矩形，fillStyle来改变填充的颜色，strokeStyle改变填充的线条颜色（因为用之前的颜色就和填充色不一样了，所以这里重新设置一下线条颜色，与填充色一样就好）

else if(shape == "rect"){
      canv.onmousedown=function(e){
              clientx=e.clientX;
              clienty=e.clientY;
              context.beginPath();
              context.lineWidth = line.value;    //线条粗细
              context.strokeRect(clientx-canv.offsetLeft,clienty-canv.offsetTop,30,15);
              if(flag.value == 1){
                  context.fill();
                  context.fillRect(clientx-canv.offsetLeft,clienty-canv.offsetTop,30,15);
                  context.strokeStyle=fillColor.value;    //线条颜色
                  context.fillStyle=fillColor.value;   //填充颜色
              }
           canv.onmouseup=function(e){
                context.stroke();
           }
      }
}

arc画圆

else if(shape == "arc"){
     canv.onmousedown=function(e){
           clientx=e.clientX;
           clienty=e.clientY;
           context.beginPath();
           context.lineWidth = line.value;    //线条粗细8
           context.arc(clientx-canv.offsetLeft,clienty-canv.offsetTop,30,0,(Math.PI/180)*360,false);
           if(flag.value == 1){
                 context.fill();
                 context.strokeStyle=fillColor.value;    //线条颜色
                 context.fillStyle=fillColor.value;   //填充颜色
            }
           canv.onmouseup=function(e){
                context.stroke();
           }
     }
}

5.橡皮擦

把橡皮擦做成一个圆形，利用clip进行切割。利用input框的range属性来控制橡皮擦的大小。

clearRect（x坐标，y坐标，清理宽度，清理长度）

<input type="button" value="橡皮擦" onclick="clearl()">
<input type="range" value="橡皮擦大小" id="clearlbig" max="10" min="1" step="1">

 function clearl(){
      canv.onmousedown=function(e){
          canv.onmousemove=function(e){
                clientx=e.clientX;
                clienty=e.clientY;
                context.save()
                context.beginPath()
                context.arc(clientx-canv.offsetLeft,clienty-canv.offsetTop,clearlbig.value,0,(Math.PI/180)*360);
                context.clip()
                context.clearRect(0,0,canv.width,canv.height);
                context.restore();
            }
            canv.onmouseup=function(e){
                canv.onmousemove = null;
            }
      }
}

6.清除整个画板

<button id="clearAll">清除图像</button>

 clearAll.onclick=function(){
        var w = canv.width;
        var h = canv.height;
        context.clearRect(0,0,w,h);
 }

完整代码：

<body>
    <div class="box">
        <canvas id="can" width="400" height="400" style="border: 1px #000 solid;"></canvas>
        <p>
            <form>
                设置线条颜色：<input type="color" id="color">
                设置线条粗细：<input class="line" type="number" id="line" max="100" min="1" value="1">
            </form>
        </p>
        <p>
            选择形状：
                <select name="shape" id="shape" onclick="draw(this.value)">
                    <option value="line">线条</option>
                    <option value="rect">矩形</option>
                    <option value="arc">圆</option>
                </select>
            是否填充：
                <select id="flag" value="0" >
                    <option value="0" >否</option>
                    <option value="1" >是</option>
                </select>
                设置填充颜色：<input type="color" id="fillColor">
        </p>
        <p>
            <input type="button" value="橡皮擦" onclick="clearl()">
            <input type="range" value="橡皮擦大小" id="clearlbig" max="10" min="1" step="1">
            <button id="clearAll">清除图像</button>
        </p>
    </div>
</body>

<script>
    let canv = document.getElementById("can");
    let color = document.getElementById("color");     //线条颜色
    let line = document.getElementById("line");    //线条粗细
    let shape = document.getElementById("shape");    //形状
    let flag = document.getElementById("flag");     //是否填充
    let fillColor = document.getElementById("fillColor"); //填充颜色
    let clearlbig = document.getElementById("clearlbig"); //填充颜色
    let clearAll = document.getElementById("clearAll");   //清除图像

    let context = canv.getContext("2d");//创建画笔

    draw("line")
    function draw(shape){
        if(shape == "line"){
            canv.onmousedown=function(e){
                clientx=e.clientX;
                clienty=e.clientY;
                context.beginPath();
                context.moveTo(clientx-canv.offsetLeft,clienty-canv.offsetTop);  //减少偏移
                canv.onmousemove=function(e){  //写在onmousedown里面
                    clientx=e.clientX;
                    clienty=e.clientY;
                    context.strokeStyle=color.value;    //线条颜色
                    context.lineWidth = line.value;    //线条粗细
                    context.lineTo(clientx-canv.offsetLeft,clienty-canv.offsetTop);
                    context.stroke();
                }
                canv.onmouseup=function(e){
                    canv.onmousemove = null;
                }
            }
        }else if(shape == "rect"){
            canv.onmousedown=function(e){
                clientx=e.clientX;
                clienty=e.clientY;
                context.beginPath();
                context.lineWidth = line.value;    //线条粗细
                context.strokeRect(clientx-canv.offsetLeft,clienty-canv.offsetTop,30,15);
                if(flag.value == 1){
                        context.fill();
                        context.fillRect(clientx-canv.offsetLeft,clienty-canv.offsetTop,30,15);
                        context.strokeStyle=fillColor.value;    //线条颜色
                        context.fillStyle=fillColor.value;   //填充颜色
                    }
            canv.onmouseup=function(e){
                    context.stroke();
                }
            }
        }else if(shape == "arc"){
            canv.onmousedown=function(e){
                clientx=e.clientX;
                clienty=e.clientY;
                context.beginPath();
                context.lineWidth = line.value;    //线条粗细8
                context.arc(clientx-canv.offsetLeft,clienty-canv.offsetTop,30,0,(Math.PI/180)*360,false);
                if(flag.value == 1){
                        context.fill();
                        context.strokeStyle=fillColor.value;    //线条颜色
                        context.fillStyle=fillColor.value;   //填充颜色
                    }
            canv.onmouseup=function(e){
                    context.stroke();
                }
            }
        }
    }
    clearAll.onclick=function(){
        var w = canv.width;
        var h = canv.height;
        context.clearRect(0,0,w,h);
    }
    function clearl(){
        canv.onmousedown=function(e){
            canv.onmousemove=function(e){
                clientx=e.clientX;
                clienty=e.clientY;
                context.save()
                context.beginPath()
                context.arc(clientx-canv.offsetLeft,clienty-canv.offsetTop,clearlbig.value,0,(Math.PI/180)*360);
                context.clip()
                context.clearRect(0,0,canv.width,canv.height);
                context.restore();
            }
            canv.onmouseup=function(e){
                canv.onmousemove = null;
            }
        }
    }
</script>