JavaScript 简易画板

Posted Davis

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 简易画板相关的知识,希望对你有一定的参考价值。

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>

效果图 如下:

 

以上是关于JavaScript 简易画板的主要内容,如果未能解决你的问题,请参考以下文章

Java版简易画图板的实现

Kivy 中文教程 实例入门 简易画板 (Simple Paint App):1. 自定义窗口部件 (widget)

canvas简易画板。

用Java语言编写一个简易画板

Qt 简易画板

Kivy 中文教程 实例入门 简易画板 (Simple Paint App):0. 项目简介 & 成果展示