发布网友 发布时间:2022-04-20 22:18
共2个回答
懂视网 时间:2022-05-12 16:52
今天教大家做一个小程序,利用CSS3和H5以及JS做一个好玩的简易画板,有兴趣的朋友可以动手尝试一下,代码贴在下面。大家也可以发挥自己的创造力改动一些功能。html: <body> <canvas width="800" height="600" id="c1"> <span> </span> </canvas> <ul id="ul1"> <li>颜色版:<input id="color" type="color"/></li> <li>笔触:<input id="num" type="number" min="0" max="100"/></li> <li></li> </ul> </body> css: <style> *{ margin:0; padding:0;} body{ background:#000;} canvas{ background:#fff; float:left;} span{ color:#fff; font-size:80px;} #ul1{width:100px;height:600px; float:left; background:#ccc;} </style> javascript: <script> window.onload=function(){ var oC=document.getElementById('c1'); var oColor=document.getElementById('color'); var oNum=document.getElementById('num'); var gd=oC.getContext('2d');//画笔 oNum.onchange=function(){ gd.lineWidth = oNum.value; strokeFn(); }; oColor.onchange=function(){ gd.strokeStyle = oColor.value; strokeFn(); }; strokeFn(); function strokeFn(){ gd.beginPath(); oC.onmousedown=function(ev){ gd.moveTo(ev.clientX,ev.clientY); oC.onmousemove=function(ev){ gd.lineTo(ev.clientX,ev.clientY); gd.stroke(); }; oC.onmouseup=function(){ oC.onmousemove=oC.onmouseup=null; }; return false; }; } }; </script>
相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
怎样不使用CSS改变鼠标悬停样式
如何用CSS做图片旋转效果
怎么优化HTML网页
热心网友 时间:2022-05-12 14:00
main.html做个导航栏,right.html做radiobutton的五个input type="text",left.html做textbox的五个,用iframe将right和left放到所需位置,设置visibility为hidden,点击后用JS改变其值为visible,保存的实现用sample.js,就是改变这些input的defaultValue为输入的内容