canvas做画板效果

最新推荐文章于 2022-11-08 16:59:31 发布

Rampage_w

最新推荐文章于 2022-11-08 16:59:31 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/Rampage_w/article/details/100888258

版权

用 canvas做一个简单的画板效果

可以改变字体的粗细，还可以改变字体的颜色，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas{display: block;border: 1px solid gray;margin: 50px auto;}
    </style>
</head>
<body>
    <select name="" id="slt">
        <option value="1px">1px</option>
        <option value="2px">2px</option>
        <option value="3px">3px</option>
    </select>
    <input type="color" id="cs">
    <canvas width="1100" height="500" id="cvs"></canvas>
    <script>
        //stroke()
        var cvs=document.getElementById('cvs');
        var slt=document.getElementById('slt');
        var ctx=cvs.getContext('2d');
        var cs=document.getElementById('cs');

        //添加改变事件
        slt.onchange=function(){
            ctx.lineWidth=parseInt(this.value);//修改画笔宽度
        };
        //改变画笔颜色
        cs.onchange=function(){
            console.log(this.value);
            ctx.strokeStyle=this.value;
        };
        
        var flag=false;//标识鼠标是否按下  默认不按下

        //添加事件
        //鼠标按下
        cvs.onmousedown=function(e){
            flag=true;//
            e=e||window.event;
            var x=e.pageX-this.offsetLeft;//鼠标位置
            var y=e.pageY-this.offsetTop;
            ctx.beginPath();
            ctx.moveTo(x,y);
        };
        //鼠标移动
        cvs.onmousemove=function(e){
            if(!flag){
                return;//鼠标未按下不执行
            }
            e=e||window.event;
            var x=e.pageX-this.offsetLeft;//鼠标位置  减去画板偏移量
            var y=e.pageY-this.offsetTop;
            ctx.lineTo(x,y);
            ctx.stroke();//绘制
        };
        //鼠标按键抬起
        cvs.onmouseup=function(){
            //结束绘制
            flag=false;
        };

    </script>
</body>
</html>

实际：在这里插入图片描述