首页 > 代码库 > JavaScript 简易画板
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 简易画板
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。