canvas画板功能，可以写写画画，直接复制粘贴就可以使用了

最新推荐文章于 2023-06-08 15:50:16 发布

Pianoboy前端

最新推荐文章于 2023-06-08 15:50:16 发布

阅读量1.3k

点赞数

分类专栏：技术前端文章标签： javascript canvas 画板功能 html 鼠标跟随

本文链接：https://blog.csdn.net/qq_38516533/article/details/82345291

版权

技术同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>画笔功能DEMO</title>
	<meta charset="utf-8">
</head>
<style type="text/css">
	.drawColor{
      position: absolute;
      top:10px;
      z-index: 999;
    }
    *{
        margin:0;
        padding:0;
    }
    input{
        width:100px;
        border:none;
        border-radius: 5px;
        border:1px double #999;
        background-color: #282923;
        color:#FFF;
        cursor:pointer;
        transition: all 0.5s;
    }
    input:hover{
        transform: scale(1.05);
    }
    #red{
        color:red;
    }
    #green{
        color:green;
    }
    #blue{
        color:blue;
    }
    #clear{
        font-weight: bold;
    }
</style>
<body>
<canvas width="1920" height="1080" id="canvas">
    <span>不支持canvas，给用户判定</span>
</canvas>
<div class="drawColor">
    <input type="button" value="红画笔" id="red">
    <input type="button" value="绿画笔" id="green">
    <input type="button" value="蓝画笔" id="blue">
    <input type="button" value="重置颜色" id="default">
    <input type="button" value="清除画布" id="clear">
</div>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;//canvas的宽高定于屏幕宽高，WHauto;
        canvas.height = window.innerHeight;//canvas的宽高定于屏幕宽高，WHauto;
        var ctx = canvas.getContext("2d");//获取上下文
        var oInput = document.getElementsByTagName("input");//获取颜色选择按钮

        for(var i=0;i<oInput.length;i++){
            oInput[i].onclick = function(){
                var ID = this.getAttribute('id');
                switch(ID){
                    case 'red':
                        ctx.strokeStyle = 'red';
                        break;
                    case 'green':
                        ctx.strokeStyle = 'green';
                        break;
                    case 'blue':
                        ctx.strokeStyle = 'blue';
                        break;
                    case 'default':
                        ctx.strokeStyle = 'black';
                        break;
                    case 'clear':
                        ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
                        break;    
                }    
            }    
        }//选择不同的按钮执行不同的strokeStyle
        draw();//绘制线条函数
        function draw(){
            canvas.onmousedown = function(ev){
                var ev = ev || event;//兼容火狐
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;//获取滚动条滚动距离
                ctx.beginPath();//上下文绘制路径方法开始
                ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop+scrollTop);
                document.onmousemove = function(ev){
                    var ev = ev || event;//兼容火狐
                    ctx.lineTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop+scrollTop);//路径x，y随着鼠标move跟随
                    ctx.stroke();//上下文结束路径方法

                }
                document.onmouseup = function(ev){
                    document.onmousemove = document.onmouseup = null;
                    ctx.closePath();//结束路径
                }
                
            }
        }   
    }
  </script>
</body>
</html>

难点主要:

1.兼容火狐

2.获取鼠标相对canvas移动距离（scrollTop也要算进去）

3.事件逻辑

欢迎联系邮箱：pianoboy_1@163.com

Pianoboy前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画板功能，可以写写画画，直接复制粘贴就可以使用了

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;画笔功能DEMO&lt;/title&gt; &lt;meta charset="utf-8"&gt;&lt;/head&gt;&lt;style type="text/css"&gt; .drawColor{
复制链接

扫一扫