文档章节

用HTML5实现的在线编辑工具

彭小厨
 彭小厨
发布于 2015/11/22 23:08
字数 3321
阅读 57
收藏 1

在线画图工具

技术需求分析

页面布局-->HTML5标签

页面美化-->CSS2

功能设置-->javascript编程

CanvasAPI



画直线功能分析

鼠标点下去的时候-->获取直线的开始

鼠标抬起来的时候-->获取直线的结束点

鼠标移动的时候-->不做任何操作

鼠标移出画布的时候也不做任何操作

画圆圈的功能分析

鼠标点下去的时候-->获取的是圆圈的圆心

鼠标抬起的时候-->先获取了半径,画出圆

鼠标移动-->不需要操作

鼠标移出画布-->不需要操作

画矩形的功能分析

鼠标按下的时候-->获取矩形的开始点

鼠标抬起的时候-->获取矩形对角线的结束点,计算出宽高,然后画出矩形


画三角形的功能分析

鼠标点下去的时候-->获取三角形的中心点

鼠标抬起来的时候-->获取三角形右下角的顶点

鼠标移动的时候-->不做任何操作

鼠标移出画布的时候也不做任何操作

橡皮擦功能

鼠标点击的时候-->擦除点击处所在的部分区域

鼠标移动的时候-->随着鼠标的移动,擦除移动过的地方

鼠标抬起的时候-->取消擦除事件

鼠标移出的时候-->取消擦除事件

油漆桶功能

鼠标点击在canvas画布的时候-->把整个画布变成一种颜色

鼠标移动-->不做操作

鼠标抬起-->不做操作

鼠标移出画布-->不做操作

文本功能分析

鼠标点击时触发写字的方法;

鼠标移动不需要-->不需要操作

鼠标抬起-->不需要操作

鼠标移出-->也不需要操作

onlineCanvas.html

<!doctype html>

<html>

<head>

 <meta charset="utf-8">

 <title>HTML5在线画图板</title>

 <link href="canvas.css" type="text/css" rel="stylesheet"/>

</head>

<body>

   <header id="header">HTML5在线画图板</header>

<section id="content">

<!--工具区域-->

<ul id="tool">

<li>

<h3>图像</h3>

<hr/>


<ul id="image">

<li id="saveimg">

<form id="myform" action="http://localhost/down.php" method="post">

   <input type="hidden" name="data" id="data" value=""/>

<button onclick="saveImg()">保存图片</button>

</form>

</li>

<li id="clearimg" onclick="clearImg()"><button>清空画板</button></li>

</ul>

</li>

<li>

<h3>工具</h3>

<hr/>

<ul id="means">

  <li id="means_brush"  onclick="drawBrush(0)"><image src="images/2.jpg"/></li>

  <li id="means_eraser" onclick="drawEraser(1)"><image src="images/2.jpg"/></li>

  <li id="means_paint" onclick="drawPaint(2)"><image src="images/2.jpg"/></li>

  <li id="means_straw" onclick="drawStraw(3)"><image src="images/2.jpg"/></li>

  <li id="means_text" onclick="drawText(4)"><image src="images/2.jpg"/></li>

  <li id="means_magnifier" onclick="drawMagnifier(5)"><image src="images/2.jpg"/></li>

</ul>

</li>

<li>

<h3>形状</h3>

<hr/>

<ul id="shape">

  <li id="shape_line" onclick="drawLine(6)"><image src="images/2.jpg"/></li>

  <li id="shape_arc"  onclick="drawArc(7)"><image src="images/2.jpg"/></li>

  <li id="shape_rect"  onclick="drawRect(8)"><image src="images/2.jpg"/></li>

  <li id="shape_poly"  onclick="drawPoly(9)"><image src="images/2.jpg"/></li>

  <li id="shape_arcfill"  onclick="drawArcFill(10)"><image src="images/2.jpg"/></li>

  <li id="shape_rectfill"  onclick="drawRectFill(11)"><image src="images/2.jpg"/></li>

</ul>

</li>

<li>

<h3>线宽</h3>

<hr/>

<ul id="size">

  <li id="width_1" onclick="setLineWidth(0)"><image src="images/2.jpg"/></li>

  <li id="width_3" onclick="setLineWidth(1)"><image src="images/2.jpg"/></li>

  <li id="width_5" onclick="setLineWidth(2)"><image src="images/2.jpg"/></li>

  <li id="width_8" onclick="setLineWidth(3)"><image src="images/2.jpg"/></li>

</ul>

</li>

<li>

<h3>颜色</h3>

<hr/>

<ul id="color">

<li id="red" onclick="setColor(this,0)"></li>

<li id="green" onclick="setColor(this,1)"></li>

<li id="blue" onclick="setColor(this,2)"></li>

<li id="yellow" onclick="setColor(this,3)"></li>

<li id="white" onclick="setColor(this,4)"></li>

<li id="black" onclick="setColor(this,5)"></li>

<li id="pink" onclick="setColor(this,6)"></li>

<li id="purple" onclick="setColor(this,7)"></li>

<li id="cyan" onclick="setColor(this,8)"></li>

<li id="orange" onclick="setColor(this,9)"></li>

</ul>

</li>

</ul>

<!--绘图区域-->

<canvas id="canvas" width="880" height="400">

您的浏览器不支持canvas标签,请升级浏览器

</canvas>

<!--请在canvas标签之后连入js文件-->

<script src="canvas.js"></script>

</section>

<footer id="footer">

<small>版权所有,盗版不究@pengbina.com.cn</small>

</footer>

</body>

</html>

canvas.js

//获取工具按钮的标签

var Brush=document.getElementById("means_brush");//获取画笔标签

var Eraser=document.getElementById("means_eraser");//获取橡皮标签

var Paint=document.getElementById("means_paint");//获取油漆桶标签

var Straw=document.getElementById("means_straw");//获取吸管标签

var Text=document.getElementById("means_text");//获取文本标签

var Magnifier=document.getElementById("means_magnifier");//获取放大标签


//获取形状按钮的标签

var Line=document.getElementById("shape_line");//获取画线标签

var Arc=document.getElementById("shape_arc");//获取画圆圈的标签

var Rect=document.getElementById("shape_rect");//获取画方框的标签

var Poly=document.getElementById("shape_poly");//获取画多标签的标签

var ArcFill=document.getElementById("shape_arcfill");//获取画圆形(填充)

var RectFill=document.getElementById("shape_rectfill");//获取画矩形的标签


//把12个工具和形状标签放到一个数组中

var actions=[Brush,Eraser,Paint,Straw,Text,Magnifier,Line,Arc,Rect,Poly,ArcFill,RectFill]



//获取线宽按钮

var Line_1=document.getElementById("width_1");

var Line_3=document.getElementById("width_3");

var Line_5=document.getElementById("width_5");

var Line_8=document.getElementById("width_8");

//把4种线宽放入数组

var widths=[Line_1,Line_3,Line_5,Line_8];


//获取颜色按钮

var ColorRed=document.getElementById("red");

var ColorGreen=document.getElementById("green");

var ColorBlue=document.getElementById("blue");

var ColorYellow=document.getElementById("yellow");

var ColorWhite=document.getElementById("white");

var ColorBlack=document.getElementById("black");

var ColorPink=document.getElementById("pink");

var ColorPurple=document.getElementById("purple");

var ColorCyan=document.getElementById("cyan");

var ColorOrange=document.getElementById("orange");

//将10种颜色放入数组中

var colors=[ColorRed,ColorGreen,ColorBlue,ColorYellow,ColorWhite,ColorBlack,ColorPink,ColorPurple,ColorCyan,ColorOrange];

var canvas=document.getElementById("canvas");

var cxt=canvas.getContext("2d");

   //设置初始值

   //默认选中画笔工具

drawBrush(0);

//设置默认颜色

setColor(ColorRed,0);

//设置默认线宽

setLineWidth(0);

//状态设置函数

function setStatus(Arr,num,type){

for(var i=0;i<Arr.length;i++){

//设置选中的标签改变CSS属性

if(i==num){

//设置改变CSS的样式是背景色还是边框色

if(type==1){

Arr[i].style.background="yellow";

}else{

Arr[i].style.border="1px solid #fff";

}

}else{

if(type==1){

Arr[i].style.background="#CCC";

}else{

Arr[i].style.border="1px solid #CCC";

}

}

}

}


//设置图像功能函数 保存图片 清空画布

function saveImg(){

var imgdata=canvas.toDataURL();

//data协议格式:data:资源类型;编码,内容

//data:text/html;ascii,亲,包邮不

var b64=imgdata.substring(22);

//将form表单中的隐藏表单 赋值(值就是我们获取的b64)

var data=document.getElementById("data");

data.value=b64;

//将表单提交到后台//http://localhost/down.php

var form=document.getElementById("myform");

form.submit();

}

//清空画布

function clearImg(){

//画布清除方法

cxt.clearRect(0,0,880,400);

}

//列出所有的按钮对应的函数

//铅笔工具函数

function drawBrush(num){

setStatus(actions,num,1);

var flag=0;//设置标志位,检测鼠标是否按下

canvas.onmousedown=function(evt){

evt=window.event||evt;

var startX=evt.pageX-this.offsetLeft;

var startY=evt.pageY-this.offsetTop;

cxt.beginPath();

cxt.moveTo(startX,startY);

flag=1;

}

//鼠标移动的时候->不同的绘图(获取鼠标的位置)

canvas.onmousemove=function(evt){

evt=window.event||evt;

var endX=evt.pageX-this.offsetLeft;

var endY=evt.pageY-this.offsetTop;

//判断一下鼠标是否按下

if(flag){

//移动的时候设置路径并且画出来

cxt.lineTo(endX,endY);

cxt.stroke();

}

}

//鼠标抬起的时候->设置结束点

canvas.onmouseup=function(){

flag=0;

}

//鼠标移出canvas的时候必须取消画图操作

canvas.onmouseout=function(){

flag=0;

}

}


var eraserFlag=0;//设置橡皮擦的标志位

//橡皮工具函数

function drawEraser(num){

setStatus(actions,num,1);

canvas.onmousedown=function(evt){

evt=window.event||evt;

var eraserX=evt.pageX-this.offsetLeft;

var eraserY=evt.pageY-this.offsetTop;

//canvas擦出方法 cxt.clearRect();

cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);

  eraserFlag=1;

}

//随着鼠标擦除

canvas.onmousemove=function(evt){

evt=window.event||evt;

var eraserX=evt.pageX-this.offsetLeft;

var eraserY=evt.pageY-this.offsetTop;

//擦除方法

if(eraserFlag){//判断鼠标左键是否按下(按下的情况拖动鼠标才能删除)

cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);

}

}

//抬起鼠标按键 清除擦除状态位 变成0

canvas.onmouseup=function(){

eraserFlag=0;

}

//鼠标移出画布 清除擦除状态位 变成0

canvas.onmouseout=function(){

eraserFlag=0;

}

}

//油漆桶工具函数

function drawPaint(num){

setStatus(actions,num,1);

canvas.onmousedown=function(){

//把画布涂成指定的颜色-->画一个填充颜色的矩形

cxt.fillRect(0,0,880,400);

}

canvas.onmouseup=null;

canvas.onmousemove=null;

canvas.onmouseout=null;

}

//吸管工具函数

function drawStraw(num){

setStatus(actions,num,1);

canvas.onmousedown=function(evt){

evt=window.event||evt;

var strawX=evt.pageX-this.offsetLeft;

var strawY=evt.pageY-this.offsetTop;

//获取该点坐标处的颜色信息

//获取图像信息的方法getImageData(开始点X,开始点Y,宽度,高度)

var obj=cxt.getImageData(strawX,strawY,1,1);

//obj.width obj.height obj.data

//obj.data=[红色,绿色,蓝色,透明度]//1像素的数据

/**obj.data=[

红色,绿色,蓝色,透明度,

红色,绿色,蓝色,透明度,

红色,绿色,蓝色,透明度,

红色,绿色,蓝色,透明度,

红色,绿色,蓝色,透明度

]//多像素的数据**/

//红色的RGB(255,0,0)

//绿色的RGB(0,255,0)

var color='rgb('+obj.data[0]+','+obj.data[1]+','+obj.data[2]+')';

//将吸管吸出的颜色设定到我们的应用中

cxt.strokeStyle=color;

cxt.fillStyle=color;

//颜色吸取之后自动选中画笔工具

drawBrush(0);

}

//取消移动事件,鼠标抬起事件,鼠标移出事件

canvas.onmousemove=null;

canvas.onmouseup=null;

canvas.onmouseout=null;

}

//文本工具函数

function drawText(num){

setStatus(actions,num,1);

canvas.onmousedown=function(evt){

evt=window.event||evt;

//获取鼠标点击时的位置

var textX=evt.pageX-this.offsetLeft;

var textY=evt.pageY-this.offsetTop;

//获取用户输入的信息

//window.prompt(对话框提示,默认值);

var userVal=window.prompt('请在这里输入文字','');

//将用户输入的文字写道画布中对应的坐标点上

if(userVal!=null){

cxt.fillText(userVal,textX,textY);

}

}

canvas.onmousemove=null;

canvas.onmouseup=null;

canvas.onmouseout=null;

}

//放大镜工具函数

function drawMagnifier(num){

setStatus(actions,num,1);

//用户输入的数据大小

var scale=window.prompt('请输入要放大的百分比[只能是整形]','100');

//把数据转换成对应canvas画布的大小

var scaleW=880*scale/100;

var scaleH=400*scale/100;

//将数据设置到对应HTML标签上

canvas.style.width=parseInt(scaleW)+'px';

canvas.style.height=parseInt(scaleH)+'px';

}

//线形状函数

function drawLine(num){

setStatus(actions,num,1);

canvas.onmousedown=function(evt){

evt=window.event||evt;

   //获取起始点的坐标(相对于canvas画布的)

//先获取鼠标距离页面顶端的距离和左端的距离

//evt.pageY evt.pageX 

//获取当前画布相对页面顶端和左端的距离

//this.offsetTop this.offsetLeft

//计算当前鼠标相对于canvas画布的距离(以canvas的左上角为0,0)

var startX=evt.pageX-this.offsetLeft;

var startY=evt.pageY-this.offsetTop;

//设置直线的开始点

cxt.beginPath();//尽量写上开始新路径

cxt.moveTo(startX,startY);

}

canvas.onmousemove=null;//注销掉其他工具注册事件

canvas.onmouseout=null;//

//鼠标按键抬起的时候

canvas.onmouseup=function(evt){

//计算鼠标抬起时鼠标相对于画布的坐标

var endX=evt.pageX-this.offsetLeft;

var endY=evt.pageY-this.offsetTop;

//设置路径,把开始点和结束点连接起来,然后进行绘图

cxt.lineTo(endX,endY);

cxt.closePath();

cxt.stroke();

}

}

//圆形状函数

function drawArc(num){

setStatus(actions,num,1);

var arcX;

var arcY;

canvas.onmousedown=function(evt){

evt=window.event||evt;

//获取圆心的位置

   arcX=evt.pageX-this.offsetLeft;

arcY=evt.pageY-this.offsetTop;

}

canvas.onmouseup=function(){

evt=window.event||evt;

//获取半径(目的)

//实际获取的是一个坐标

        var endX=evt.pageX-this.offsetLeft;

var endY=evt.pageY-this.offsetTop;

//计算C的距离

var a=endX-arcX;

var b=endY-arcY;

var c=Math.sqrt(a*a+b*b);

cxt.beginPath();

cxt.arc(arcX,arcY,c,0,360,false);

cxt.closePath();

cxt.stroke();

}

canvas.onmousemove=null;//注释掉鼠标移动事件

canvas.onmouseout=null;

}

//方框函数

function drawRect(num){

setStatus(actions,num,1);

var rectX=0;

var rectY=0;

canvas.onmousedown=function(evt){

evt=window.event||evt;

//获取矩形左上角(对角线的开始点)

rectX=evt.pageX-this.offsetLeft;

rectY=evt.pageY-this.offsetTop;

}

canvas.onmouseup=function(evt){

evt=window.event||evt;

var endX=evt.pageX-this.offsetLeft;

var endY=evt.pageY-this.offsetTop;

//计算矩形的宽和高

var rectW=endX-rectX;

var rectH=endY-rectY;

//画出矩形

cxt.strokeRect(rectX,rectY,rectW,rectH);

}

canvas.onmousemove=null;

canvas.onmouseout=null;

}

//多标签函数

function drawPoly(num){

setStatus(actions,num,1);

var polyX;

var polyY;

canvas.onmousedown=function(evt){

evt=window.event||evt;

polyX=evt.pageX-this.offsetLeft;

polyY=evt.pageY-this.offsetTop;

}

canvas.onmouseup=function(evt){

evt=window.event||evt;

var endX=evt.pageX-this.offsetLeft;

var endY=evt.pageY-this.offsetTop;

cxt.beginPath();

//将画笔移动到右下角的顶点

cxt.moveTo(endX,endY);

//计算左下角顶点坐标

var lbX=2*polyX-endX;

var lbY=endY;

cxt.lineTo(lbX,lbY);

//设置第三个顶点的坐标

var tmpC=2*(endX-polyX);

var tmpA=endX-polyX;

var tmpB=Math.sqrt(tmpC*tmpC-tmpA*tmpA);

//计算顶点坐标

//endY-tmpB 顶点的Y坐标,X是顶点的X坐标

//画到顶点

cxt.lineTo(polyX,endY-tmpB);

//封闭路径-->画出来

cxt.closePath();

cxt.stroke();

}

canvas.onmousemove=null;

canvas.onmouseout=null;

}

//圆形(填充)函数

function drawArcFill(num){

setStatus(actions,num,1);

var arcX;

var arcY;

canvas.onmousedown=function(evt){

evt=window.event||evt;

//获取圆心的位置

   arcX=evt.pageX-this.offsetLeft;

arcY=evt.pageY-this.offsetTop;

}

canvas.onmouseup=function(){

evt=window.event||evt;

//获取半径(目的)

//实际获取的是一个坐标

        var endX=evt.pageX-this.offsetLeft;

var endY=evt.pageY-this.offsetTop;

//计算C的距离

var a=endX-arcX;

var b=endY-arcY;

var c=Math.sqrt(a*a+b*b);

cxt.beginPath();

cxt.arc(arcX,arcY,c,0,360,false);

cxt.closePath();

cxt.fill();

}

canvas.onmousemove=null;//注释掉鼠标移动事件

canvas.onmouseout=null;

}

//矩形标签函数

function drawRectFill(num){

setStatus(actions,num,1);

var rectX=0;

var rectY=0;

canvas.onmousedown=function(evt){

evt=window.event||evt;

//获取矩形左上角(对角线的开始点)

rectX=evt.pageX-this.offsetLeft;

rectY=evt.pageY-this.offsetTop;

}

canvas.onmouseup=function(evt){

evt=window.event||evt;

var endX=evt.pageX-this.offsetLeft;

var endY=evt.pageY-this.offsetTop;

//计算矩形的宽和高

var rectW=endX-rectX;

var rectH=endY-rectY;

//画出矩形

cxt.fillRect(rectX,rectY,rectW,rectH);

}

canvas.onmousemove=null;

canvas.onmouseout=null;

}


//线宽设置函数

function setLineWidth(num){

setStatus(widths,num,1);

switch(num){

case 0:

cxt.lineWidth=1;

break;

case 1:

cxt.lineWidth=3;

break;

case 2:

cxt.lineWidth=5;

break;

case 3:

   cxt.lineWidth=8;

break;

default:

cxt.lineWidth=1;

}

}


//颜色设置函数

function setColor(obj,num){

setStatus(colors,num,0);

    //设置画笔颜色和填充颜色

cxt.strokeStyle=obj.id;

cxt.fillStyle=obj.id;

}

canvas.css

/**页面公共属性设置**/

*{padding:0;margin:0;list-style:none;}


body{background:#ABCDEF;}

/**页面顶部属性设置**/

#header{width:900px;height:80px;font-size:40px;margin:0 auto;text-align:center;line-height:80px;}

/**页面中间部分(画图板)属性设置**/

#content{width:880px;height:550px;background:gray;margin:0 auto;padding:10px;}


#tool{height:150px;text-align:center;}

#tool li{float:left;width:175px;height:140px;background:#ccc;border-right:1px solid red;}


#image{text-align:left;padding:20px;}

#image li{height:30px;width:100px;list-style:square inside;}

#image li button{background:gray;border:1px solid #000}

#image li button:hover{background:gray;border:1px solid #fff}


#means,#shape{padding:20px;}

#means li,#shape li{height:20px;width:40px;border:1px solid #000;margin-bottom:10px;}

#means li:hover,#shape li:hover{height:20px;width:40px;border:1px solid #fff;margin-bottom:10px;}

#means img,#shape img,#size img{height:20px;width:20px;}


#size{padding:10px;}

#size li{height:20px;width:30px;border:1px solid #000}

#size li:hover{height:20px;width:30px;border:1px solid #fff}


#color{padding:25px;}

#color li{width:20px;height:20px;border:1px solid #000;margin-bottom:10px;

margin-right:3px;}

#color li:hover{width:20px;height:20px;border:1px solid #fff;margin-bottom:10px;

margin-right:3px;}

#color #red{background:red;}

#color #green{background:green;}

#color #blue{background:blue;}

#color #yellow{background:yellow;}

#color #white{background:white;}

#color #black{background:black;}

#color #pink{background:pink;}

#color #purple{background:purple;}

#color #cyan{background:cyan;}

#color #orange{background:orange;}


#canvas{background:white;}

/**页面底部属性设置**/

#footer{width:900px;height:30px;margin:0 auto;text-align:center;}

down.php

<?php

//声明文件的类型  MIME数据类型

header('Content-type:image/png');

//文件的相关描述

header('Content-Disposition:attachment;filename="canvas.png"');

//文件的内容

echo base64_decode($_POST['data']);

?>


© 著作权归作者所有

共有 人打赏支持
上一篇: CSS3学习笔记
下一篇: HTML5学习笔记
彭小厨
粉丝 5
博文 59
码字总数 28144
作品 0
深圳
程序员
私信 提问
23 款非常有用的 HTML5 工具

HTML5 工具其强大的功能,可以协助 Web 开发人员和设计师完成很多工作。例如可以让网站管理员把图片、视频、音频、动画、字体在网页上进行拖拉摆放。另外一个就是兼容旧的HTML/HTML4网站设计...

oschina
2013/05/17
11K
18
最好的 6 个 HTML5 的多媒体播放器

是 HTML5 中新引入的标签,用来在 Web 网页中嵌入视频播放功能,无需 Flash 和其他嵌入式插件的支持,是浏览器内建的功能,不过 旨在一些高级浏览器中支持,例如 Firefox, Safari, Chrome, a...

红薯
2011/11/27
9.4K
9
16 款加速编码的 HTML5 在线工具

HTML5 是在开发者和设计者之间最流行的语言之一,提供了大量的功能来帮助开发者们快速的设计 web 应用。HTML5 有很多特性,例如支持现代化的浏览器(比如:Firefox 6,Google Chrome,IE9 等...

oschina
2014/01/20
4.1K
3
超过 20 个强大的 HTML5 Web 应用

1. Twimbow Twimbow 是一个基于 HTML5 开发的 Web 应用,用于帮助用户管理他的社交网络,该应用色彩非常多样。 2. Aviary Aviary 包含很多图像工具和向量编辑器,你可以在上面对图像进行一些...

红薯
2012/01/31
6.9K
7
20 个大大节省你时间的 HTML5 开发工具

Rendera 如果你希望有个环境可以测试、浏览和体验各种不同的 CSS/HTML 和 JavaScript 代码,Rendera 为你提供了实时的运行结果。类似 RunJS。 Patternizer 从名字可看出该工具可以创建真正的...

oschina
2013/07/15
11.5K
8

没有更多内容

加载失败,请刷新页面

加载更多

Mac 10.14 编译Android 8.1源码及刷入nexus 6p

环境准备 官网 描述得已经相当清楚了 ,这里稍微总结一下: 创建区分大小写的磁盘映像 mac系统默认是不区分大小写的,所以我们需要创建一个区分大小写的文件系统 hdiutil create -type SPARS...

猴亮屏
13分钟前
0
0
js获取url参数

function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var url =decodeURI(decodeURI(window.location.search)); var r = url.substr(1).match(reg);//s......

ArlenXu
20分钟前
1
0
(转)Spring MVC的常用注解

@Controller(常用) 注解一个类表示控制器,Spring MVC会自动扫描标注了这个注解的类。 @RequestMapping(常用) 请求路径映射,可以标注类,也可以是方法,可以指定请求类型,默认不指定为...

政旭Arvin
26分钟前
0
0
Navicat使用教程:在Navicat Monitor for MySQL/MariaDB中配置实例

下载Navicat Monitor最新版本 Navicat Monitor 是一套安全、简单而且无代理的远程服务器监控工具。它具有强大的功能使你的监控发挥最大效用。受监控的服务器包括 MySQL、MariaDB 和 Percona ...

电池盒
29分钟前
0
0
sql根据日期查询,本周,本月,本年,今日相关统计

sql根据日期查询,本周,本月,本年,今日相关统计 昨天 select * from tb where datediff(day, 时间字段 ,getdate()) = 1 今天 select * from tb where datediff(day, 时间字段 ,getdate()) = ...

BraveLN
39分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部