canvas简易画板

布满荆棘的人生 2022-05-21 08:46 227阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>canvas简易画板</title>
    <style type="text/css">
    	
    	#cvs{
    		border: 1px solid red;
    	}
    </style>
    </head>
    <body>
    
    	<canvas id="cvs" width="500" height="450"></canvas>
    	<button id="btn">绘画</button>
    	<button id="btn1">橡皮擦</button>
    	<button id="btn2">重置</button>
    	
    </body>
    <script type="text/javascript">
    	var cvs=document.getElementById("cvs")
    
    	var ctx=cvs.getContext('2d');
    	
    	var btn=document.getElementById("btn");
    	var btn1=document.getElementById("btn1");
    	var btn2=document.getElementById("btn2");
    	btn.οnclick=function(){
    		cvs.οnmοusedοwn=function(e){
    			ctx.beginPath();
    			ctx.moveTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop)
    			document.οnmοusemοve=function(e){
    				ctx.lineTo(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop)
    				ctx.lineWidth=2;
    				ctx.strokeStyle='blue';
    				ctx.stroke()
    			}
    			
    			document.οnmοuseup=function(){
    				document.οnmοusedοwn=null;
    				document.οnmοusemοve=null;
    			}
    		}
    	}
    	btn1.οnclick=function(){
    		cvs.οnmοusedοwn=function(){
    			document.οnmοusemοve=function(e){
    				ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,5,5)
    			}
    		}
    	}
    	btn2.οnclick=function(){
    		ctx.clearRect(0,0,500,450)
    	}
    	
    </script>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas 实现画板(2021/5/10)

将画笔功能:能够拖动鼠标在页面内绘图，能够设置画笔的粗细，设置画笔的颜色能够在任意位置绘制圆形:拖动鼠标即可随意在任意位置绘制圆形，并且可以随意定制大小能

我会带着你远行/ 2023年01月19日 14:55/ 0 赞/ 151 阅读

相关 canvas画板

文章目录（1）指定填充的颜色（2）指定透明度（3）透明度(Transparent)

叁歲伎倆/ 2022年11月16日 05:58/ 0 赞/ 159 阅读

相关手写原生代码专题 | 简易手写画板（二）

![2c5b8d5d30f6501be867b70dc9c3d8af.png][] 大家好，本篇文章，小编将和大家完成一个手写画板的示例，这个例子比较简单只能画简单的线条，并

小灰灰/ 2022年10月07日 07:51/ 0 赞/ 223 阅读

相关 html5 canvas自定义画板

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> </head> <

￡神魔★判官ぃ/ 2022年08月02日 12:44/ 0 赞/ 202 阅读

相关 QT下简易画板实现

//maindow.h \ifndef MAINWINDOW\_H \define MAINWINDOW\_H \include"paintwidget.h" \i

以你之姓@/ 2022年06月09日 07:17/ 0 赞/ 290 阅读

相关使用canvas制作一个移动端画板

概述使用canvas做一个画板，代码里涵盖了一些canvas绘图的基本思想，各种工具的类也可以分别提出来用详细代码下载：[http://www.demod

淩亂°似流年/ 2022年05月31日 08:42/ 0 赞/ 403 阅读

相关 canvas简易画板

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas简易

布满荆棘的人生/ 2022年05月21日 08:46/ 0 赞/ 228 阅读

相关 canvas简易刮奖

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易画

痛定思痛。/ 2022年05月21日 08:45/ 0 赞/ 226 阅读

相关画板

简述画板：首先设置一些属性：画板，画笔，创建数组imgArr放ImageData 对象添加一些方法：draw，绑定mousedown，mousemove，mouse

朴灿烈づ我的快乐病毒、/ 2022年05月10日 11:00/ 0 赞/ 204 阅读

相关 canvas制作简易画板

![70][] <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-

我不是女神ヾ/ 2021年09月16日 04:10/ 0 赞/ 369 阅读