DDR爱好者之家

javascript+Canvas实现画板功能
站长资源 2025/11/5 佚名
76 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了Canvas实现画板功能的具体代码，供大家参考，具体内容如下

CSS样式代码

body,
 html {
 text-align: center;
 padding-top: 20px;
 /*margin: 0;*/
 }

canvas {
 box-shadow: 0 0 10px #333;
 margin: 0 auto;
 /*position: absolute;
 left: 0; 
 border: 1px solid red;*/
}

这是主体代码

<body onload="draw()">
 <canvas id="canvas" width="800" height="600">
 </canvas>
 <script>
 function draw() {
 var canvas = document.getElementById("canvas");
 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');
 //涂鸦
 //添加鼠标按下事件
 canvas.onmousedown=function(e){
  var ev=e||window.event;//兼容性
  var x=ev.clientX-canvas.offsetLeft;
  var y=ev.clientY-canvas.offsetTop;
  
 ctx.strokeStyle='red';
 ctx.lineWidth=10;
  
 ctx.beginPath();
 ctx.moveTo(x,y);

 //onmousemove
 canvas.onmousemove=function(e){
 var ev=e||window.event;//兼容性
 var x=ev.clientX - canvas.offsetLeft;
 var y=ev.clientY - canvas.offsetTop;
 ctx.lineTo(x,y);
 ctx.stroke();
 }
  canvas.onmouseup=function(){
  canvas.onmousemove="";//当鼠标不点击时则不会画画
  
  }
 }
 }
   }
</script>
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米