首页 > 其他分享 >手写板 canvas

手写板 canvas

时间:2024-09-25 17:49:14浏览次数:6  
标签:function canvas document ctx cvs 手写板 ev 800

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{margin:0;padding:0;}
.out{
width: 800px;
margin: 50px auto;
position: relative;
}
.out p{
font-size: 24px;
color: red;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
.out button{
color: green;
font-style: 18px;
cursor: pointer;
position: absolute;
top: 20px;
right: 5%;
border: none;
background: none;
outline: none;
border: 1px solid green;
padding: 2px 4px;
border-radius: 2px;
}
#cvs1{
background: #eee;
cursor: pointer;
}
</style>
</head>
<body>
<div class="out">
<p>写写看...</p>
<button>清除</button>
<canvas id="cvs1" width="800" height="800"></canvas>
</div>
<script>
var cvs=document.getElementById('cvs1'),
ctx=cvs.getContext('2d'),
l=cvs.getBoundingClientRect().left,
t=cvs.getBoundingClientRect().top;

ctx.beginPath();
ctx.fillStyle="#eee";
ctx.fillRect(0,0,800,800);
ctx.closePath();

cvs.onmousedown=function(ev){
var ev=ev||window.event,
x=ev.clientX-l,
y=ev.clientY-t;

ctx.beginPath();
ctx.moveTo(x,y);

document.onmousemove=function(ev){
var ev=ev||window.event,
dx=ev.clientX-l;
dy=ev.clientY-t;

ctx.lineTo(dx,dy);
ctx.strokeStyle='red';
ctx.lineWidth=4;
ctx.stroke();
return false;
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null;
ctx.closePath();
}
return false;
}

document.getElementsByTagName('button')[0].onclick=function(){
ctx.clearRect(0,0,800,800);
}
</script>
</body>
</html>

 

标签:function,canvas,document,ctx,cvs,手写板,ev,800
From: https://www.cnblogs.com/luckyuns/p/18431837

相关文章

  • Canvas简历编辑器-Monorepo+Rspack工程实践
    Canvas简历编辑器-Monorepo+Rspack工程实践 Canvas简历编辑器-Monorepo+Rspack工程实践在之前我们围绕Canvas聊了很多代码设计层面的东西,在这里我们聊一下工程实践。在之前的文中我也提到过,因为是本着学习的态度以及对技术的好奇心来做的,所以除了一些工具类的库例如 ArcoDe......
  • 【Canvas与诗词】铁马冰河入梦来
    【成图】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>金红圈铁马冰河入梦来</title><styletype="text/css&quo......
  • 【Unity】UI、背景和3D的Camera和Canvas设置
    目前存在需求背景是指定的图片,该图片始终显示在页面中,不会因场景的视角操控发生尺寸等变化;UI内容显示在页面最上层,同样不会因场景的视角操控发生尺寸等变化,但是当软件整个尺寸发生变化时,会跟随变化,UI内容会覆盖3D物体;3D物体可以随着相机视角的变化而变近变远等,3D物体上可能存在......
  • 【Canvas技法】辐射式多道光影的实现
    【用余弦函数实现辐射四道光】成图:代码:constR=180;//基准尺寸//十字纹ctx.save();r=R;varN=3600;for(vari=0;i<N;i++){vartheta=Math.PI*2/N*i;vara=createPt(r*Math.cos(theta),r*Math.s......
  • 【Canvas与诗词】木兰辞节选
    【成图】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>金边钢底徽章</title><styletype="text/css"&g......
  • Netty+HTML5+Canvas 网络画画板实时在线画画
    采用Html5的canvas做前端画画板,发送数据到后端Netty服务,实时转发笔迹数据,在线实时同步画笔轨迹,单击绿色小方块,保存画板的图片页面:<!--index.html--><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>网络画画板</title></head><body&g......
  • WPF Canvas show custom control with ellipse filled with image and text,peridoica
    //customcontrol<UserControlx:Class="WpfApp389.ElpImageTbk"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"......
  • 【Canvas与诗词】《侠客行》节选
    【成图】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>437.侠客行</title><styletype="text/css"&......
  • 处理微信小程序 ec-canvas 绘制map地图时缩放大小问题
    版本为5.1.2min版本,https://github.com/apache/echarts/releases?page=3 最重要的是这个下面这个dataZoom写法添加dataZoom:{type:'inside'},constoption={dataZoom:{type:'inside'},geo:......
  • WPF System.Windows.Media.Color A value must be set, display ball and number in c
    privateColorGetRndColor(){Colorcr=newColor();cr.A=255;cr.R=(byte)(rnd.Next(0,255));cr.G=(byte)(rnd.Next(0,255));cr.B=(byte)(rnd.Next(0,255));returncr;}         //usercontrol.......