javascript+Canvas实现画板功能

网络编程 2024/4/29 佚名

3 2 1

本文实例为大家分享了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>

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

js,canvas,画板

标签：

js,canvas,画板

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“javascript+Canvas实现画板功能”

javascript+Canvas实现画板功能

暂无“javascript+Canvas实现画板功能”评论...

javascript+Canvas实现画板功能

js,canvas,画板

JS实现canvas简单小画板功能

vue.js实现照片放大功能

评论“javascript+Canvas实现画板功能”

更新动态

友情链接