JavaScript 简易画板

Posted 2020-09-06 Davis

html 5 canvas只是一个容器,想要画出东西全部依赖于javascript.感觉什么都离不开这个JavaScript脚本.

简易画板核心代码:

<script>
        var start = false;//绘制开关是否开始?
        window.onload = function(){
            var cvs = document.getElementById("cvs");
            var cxt = cvs.getContext("2d");
            
            //鼠标在画板上按下
            cvs.onmousedown = function(){
                //1.获取鼠标的坐标
                var x = event.offsetX;
                var y = event.offsetY;
                //2.把画笔移到当前位置
                cxt.moveTo(x,y);
                //3.打开绘制开关
                start = true;
                //4.获取并设置画笔颜色
                var color = document.getElementById("color").value;
                cxt.strokeStyle = color;
                //5.重新设置路径
                cxt.beginPath();
                //6.阻止默认程序
                event.preventDefault();
            }
            //鼠标在画板上移动
            cvs.onmousemove = function(){
                if(start){
                    //1.获取鼠标的新坐标
                    var x = event.offsetX;
                    var y = event.offsetY;
                    //2.绘制线条到该位置
                    cxt.lineTo(x,y);
                    cxt.stroke();
                }
                
            }
            //鼠标释放
            cvs.onmouseup = function(){
                //1.关闭绘制开关
                start = false;
                //2.关闭画笔的路径
                cxt.closePath();
            }
            //鼠标移出画板
            cvs.onmouseout = function(){
                //1.关闭绘制开关
                start = false;
                //2.关闭画笔的路径
                cxt.closePath();
            }
        }
  </script>

效果图 如下: