HTML5福利篇--使用Canvas画图

news2024/12/27 2:02:50

目录

一.Canvas元素

1.Canvas元素定义

2.使用JavaScript获取页面中的Canvas对象

二.绘制图形

1.绘制直线

2.绘制矩形

（1）rect()

（2）strokeRect()

（3）fillRect()和clearRect()函数

3.绘制圆弧

4.描边和填充

5.渐变颜色

  6.透明颜色

三.绘制图像和文字

1.绘制图像

2.组合图       

3.输出文字

4.图形操作

一.Canvas元素

        Canvas是画布的意思，这个是HTML5中新出现的元素，可以在页面中定义一个画布，实现绘图功能

1.Canvas元素定义

语法：

<canvas id="xxx" height= width= >当浏览器不支持Canvas时，显示这里的文字</canvas>

id                画布元素的标识

height        画布高

width        画布宽

例如定义一个画布：

<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
2.使用JavaScript获取页面中的Canvas对象

        在JavaScript中可以用document.getElementById()方法获取网页中的对象，获得对象后，通过getContext()函数获得对象的2d上下文对象，就可以在画布上进行绘画了

语法：

docment.getElementById(ObjectId)

例：

<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
    var c=document.getElementById("canvas"); //获得画布对象
    var d=c.getContext("2d");  //获得2d上下文对象
</script>
</body>
二.绘制图形
1.绘制直线

        beginPath()                开始绘图函数

        moveTo()                该函数将坐标移动到指定坐标，函数参数为x，y

        lineTo()             绘制直线

        stroke()                绘制图形的边界轮廓

例如绘制三角形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>

   </style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
    function f() {
        var c=document.getElementById("canvas"); //获得画布对象
        var d=c.getContext("2d");  //获得2d上下文对象
        d.beginPath();   //开始绘图
        d.moveTo(100,0)     //将直线移动到绘图起点坐标
        d.lineTo(50,100);
        d.lineTo(150,100);
        d.lineTo(100,0);
        d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
        d.stroke();         //绘制轮廓
    }
   window.addEventListener("load",f,false);
</script>
</body>
</html>

效果：

又例如绘制复杂图案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
    function f() {
        var c=document.getElementById("canvas"); //获得画布对象
        var d=c.getContext("2d");  //获得2d上下文对象
        var dx=150;
        var dy=150;
        var s=100;
        d.beginPath();   //开始绘图
        var x=Math.sin(0);
        var y=Math.cos(0);
        var dig=Math.PI/15*11;
        for(var i=0;i<30;i++){
            var x=Math.sin(i*dig);
            var y=Math.cos(i*dig);
            d.lineTo(dx+x*s,dy+y*s);
        }
        d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
        d.stroke();         //绘制轮廓
    }
    window.addEventListener("load",f,true);
</script>
</body>
</html>

效果:

2.绘制矩形

        可以通过rect()函数和strokeRect()函数绘制矩形，调用fillRect()填充指定矩形的区域，调用clearRect()可以擦除指定区域的矩形

（1）rect()

        该函数用来绘制矩形，语法：

Rect(x,y,width,height)

x,y        表示矩形的起点

width，height        表示矩形的长和宽

（2）strokeRect()

        该函数和rect()函数差不多，都是绘制矩形，但该函数绘图时不需要像rect()一样调用beginPath()和closePath(),语法：

storkeRect(x,y,width,height)
（3）fillRect()和clearRect()函数

        fillRect()绘制有填充的矩形，语法：

fillRect(x,y,width,height)

        clearRect()清除矩形，语法：

clearRect(x,y,width,height)

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
    function f() {
        var c=document.getElementById("canvas"); //获得画布对象
        var d=c.getContext("2d");  //获得2d上下文对象

        d.strokeRect(360,100,150,100)  //不需要调用beginPath和closePath

        d.beginPath();   //开始绘图
        d.rect(200,100,150,150);
        d.fillRect(200,260,150,150);  //代填充的矩形
        d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
        d.stroke();         //绘制轮廓
    }
    window.addEventListener("load",f,true);
</script>
</body>
</html>

效果： 

3.绘制圆弧

        绘制圆弧函数arc()，语法：

arc(centerX,centerY,radius,startingAngle,endingAngle,antiClockwise);

参数：

centerX                圆弧圆心的X坐标

centerY                圆弧圆心的Y坐标

radius                圆弧的半径

startingAngle        圆弧的起始角度

endingAngela        圆弧的结束角度

antiClockwise        是否按逆时针绘图  

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

  </style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
  function f() {
    var c=document.getElementById("canvas"); //获得画布对象
    var d=c.getContext("2d");  //获得2d上下文对象
    d.beginPath();   //开始绘图
    d.arc(150,150,100,1/3*Math.PI,2/3*Math.PI,true);
    // d.arc(150,450,100,0,2*Math.PI,true);
    d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
    d.stroke();         //绘制轮廓
  }
  window.addEventListener("load",f,true);
</script>
</body>

效果：

4.描边和填充

        Canvas的2d上下文对象的strokeStyle属性可以设置描边的颜色，lineWidth属性可以指定描边的宽度，fillStyle属性可以设置填充的颜色

例如绘制一个红边的圆和黄色的矩形：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

  </style>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
  function f() {
    var c=document.getElementById("canvas"); //获得画布对象
    var d=c.getContext("2d");  //获得2d上下文对象
   d.lineWidth=10;
   d.strokeStyle="red";
   d.fillStyle="yellow";
    d.arc(300,100,60,0,2*Math.PI,false)
   d.fillRect(250,200,100,100);
    d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
    d.stroke();         //绘制轮廓
  }
  window.addEventListener("load",f,true);
</script>
</body>

效果：

5.渐变颜色

        CanvasGradient用于定义画布中一个渐变颜色的对象，使用渐变颜色前要创建对象，渐变颜色对象可以通过两种方式创建：

（1）以线性颜色渐变方式创建CanvasGradient对象，函数createLinearGradient()语法：

createLinearGradient(xStrat,yStrat,xEnd,yEnd)

其中的参数分别是线性开始的坐标和结束的坐标

（2）以放射颜色渐变方式创建CanvasGradient对象，函数createRadiaGradient()语法：

createRadiaGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

参数：

xStart，yStart                开始圆的圆心坐标

radiusStart                开始圆的半径

xEnd，yEnd                结束圆的圆心坐标

radiusEnd                结束圆的半径

（3）为渐变对象设置颜色

        创建渐变颜色对象后，可以通过CanvasGradient属性的addColorStop()方法在渐变的某个点添加一个颜色变化，语法：

addColorStop(offset,color)

offset                一个范围在0到1之间的浮点值，表示渐变的开始和结束的一部分

color                表示offset到颜色

（4）设置描边样式为渐变颜色

        只要将前面创建的CanvasGradient对象赋值给Canvas的上下文2d对象就可以使用渐变颜色进行描边了

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
  function f() {
    var c=document.getElementById("canvas"); //获得画布对象
    var d=c.getContext("2d");  //获得2d上下文对象
    var e=d.createRadialGradient(100,100,0,100,100,100);
    e.addColorStop(0,"red");
    e.addColorStop(0.5,"green");
    e.addColorStop(1,"yellow");
    var centerx=100;
    var centery=100;
    var radius=100;
    var startingAngle=0;
    var endingAngle=2*Math.PI;
    d.beginPath();
    d.arc(centerx,centery,radius,startingAngle,endingAngle,false);
    d.fillStyle=e;
    d.stroke(); //绘制轮廓
    d.fill();
  }
  window.addEventListener("load",f,true);
</script>
</body>

效果：

  6.透明颜色

        在指定颜色时可以使用rgba()方法定义颜色透明度，语法：

rgba(r,g,b,alpha)

参数： r表示红色集合，b表示绿色集合，b表示蓝色集合，它们都是十进制数，范围在0~255

alpha表示透明度，取值范围0~1

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="canvas" width="600" height="960">浏览器不支持</canvas>
<script>
  function f() {
    var canvas=document.getElementById("canvas"); //获得画布对象
    if(canvas == null) return false;
    var context=canvas.getContext("2d");
    // 绘制底图
    context.fillStyle="yellow";
    context.fillRect(0,0,400,350);
    // 循环绘制10个圆
    var n=0;
    for(var i=0;i<10;i++){
      context.beginPath();
      context.arc(i*25,i*25,i*10,0,2*Math.PI,true);
      context.fillStyle="rgba(255,0,0,0.5)";
      context.fill();  //填充图形
    }
  }
  window.addEventListener("load",f,true);
</script>
</body>

效果：

三.绘制图像和文字
1.绘制图像

        Canvas画布绘制图像的方法是drawImage()，语法：

drawImage(image,x,y)
drawImage(image,x,y,width,height)
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)

image                要绘制的图像

x,y                要绘制图像的左上角

width，height                绘制图像的宽和高

sourceX，sourceY                图像将要被绘制的区域的左上角

sourceWidth,sourceHeight                被绘制的原图像区域

destX，destY                要绘制图像区域的左上角的画布坐标

destWidth，destHeight                图像区域在画布上要绘制的大小

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>
    function f() {
        var c=document.getElementById("canvas"); //获得画布对象
        var ctx=c.getContext("2d");  //获得2d上下文对象
        var ImageObj=new Image();
        ImageObj.src="mn1.png";
        ImageObj.onload=function () {
            ctx.drawImage(ImageObj,0,0)  //原图大小
            ctx.drawImage(ImageObj,980,0,480,300) //原图一半显示
            //  从原图(500，0)处截取一个300x300的图像大小，在(980,350)处显示，显示大小为300x300
            ctx.drawImage(ImageObj,500,0,300,300,980,350,300,300);
        };
    }
    window.addEventListener("load",f,true);
</script>
</body>
</html>

效果：

2.组合图       

         如果画布上已经有图形了，再放一个时，我们就要考虑图片的组合问题，Canvas的2d上下文对象的gloalCompositeOperation属性可以来设置组合方式，该属性参数如下：

globalCompositeOperation属性参数
参数描述
source-over默认值，新图会覆盖在原图上
destination-over在原有内容之下显示图像
source-in新图仅仅出现与原内容重复的部分，其他区域变透明
destination-in

原有内容和新图不重复的部分会被保留

source-atop新图像中与原内容重复的部分会被绘制，并覆盖原有内容上
destination-atop原有内容和新图像重复部分会被保留，并会在原有内容之下绘制图形
source-in只有新图和原内容不重复的部分会被绘制出来
destination-in原有内容和新图不重复部分会被保留
lighter两图像中重复的部分作加色处理
darker两图像中重复的部分作减色处理
xor重复部分会变透明
copy只有新图像会被保留，其他都被清除

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>
  function draw(){
      var c=document.getElementById("canvas");
      var ctx=c.getContext("2d");
      ctx.fillStyle="blue";
      ctx.fillRect(0,0,100,100);
      ctx.fillStyle="red";
      ctx.globalCompositeOperation="source-over";
      var centerX=100;
      var centerY=100;
      var radius=50;
      var startingAngle=0;
      var endingAngle=2*Math.PI;
      ctx.beginPath();
      ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);
      ctx.fill();
  }
  window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果：

 source-over

destination-over

source-in

destination-in

source-out

destination-out

source-atop

 source-atop

lighter

xor

copy

3.输出文字

（1）输出

        使用strokeText()方法可以在画布的指定文字输出文字，语法：

stroketText(string text,float x,float y)

参数：        text        文字                x，y        文字输出位置

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>
  function draw(){
      var c=document.getElementById("canvas");
      var ctx=c.getContext("2d");
      ctx.strokeText("hello world-----hello time",200,200);
  }
  window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果：

（2）设置字体

        通过Context.font属性设置字符串字体，格式：

Context.font=“字体大小 字体名称”

例：

  var c=document.getElementById("canvas");
      var ctx=c.getContext("2d");
      ctx.font="10pt 黑体";
      ctx.strokeText("你好世界！你好时光！",200,200);

（3）设置边框宽度和颜色

        stokeStyle设置文字的颜色

（4）填充文字内部

        使用strokeText方法输出的文字是中空的，只绘制了边框，如果要填充文字内部，可以使用fillText() 方法，语法：

fillText(string text,float x,float y)

        也可以使用fillstyle属性来设置填充颜色

ctx.fiilStyle="blue";

例如渐变填充颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>
  function draw(){
      var c=document.getElementById("canvas");
      var ctx=c.getContext("2d");
      var Colordiagonal=ctx.createLinearGradient(100,100,900,100);
      Colordiagonal.addColorStop(0,"yellow");
      Colordiagonal.addColorStop(0.5,"green");
      Colordiagonal.addColorStop(1,"red");
      ctx.fillStyle=Colordiagonal;
      ctx.font="60pt 隶书";
      ctx.fillText("你好世界！你好时光！",100,100);
  }
  window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果：

4.图形操作

        （1）保持和恢复绘图状态

调用Context.save()方法可以保持当前的绘图状态，绘图状态是以堆的方式保存，调用Context.restoe()方法弹出之前保存的绘制状态，这两个方法没有参数

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>
  function draw(){
      var c=document.getElementById("canvas");
      var ctx=c.getContext("2d");
        ctx.fillStyle='red';
        ctx.fillRect(0,0,150,150);  //红色矩形
        ctx.save();   //保存绘图状态
       ctx.fillStyle="blue";
       ctx.fillRect(0,200,150,150);  //蓝色的矩形
      ctx.restore();   //恢复之前保存的绘图状态，即红色
      ctx.fillRect(200,200,150,150)
  }
  window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果：

（2）图形变换

        a.平移translate(x,y)

                参数x和y表示从原点分别平移的位移

        b.缩放scale(x,y)

                参数x和y表示坐标轴缩放比例

        c.旋转rotate(angle)

                参数angle是坐标轴旋转的角度

        d.变形setTransform()        

                语法:

setTransform(m1,m2,m3,m4,dx,dy)

表示点(x,y)变换到点(X,Y)，变换过程：

X=m1*x+m3*y+dx，Y=m2*x+m4*y+dy

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="2000" height="1000">浏览器不支持</canvas>
<script>
  function draw(){
      var c=document.getElementById("canvas");
      var context=c.getContext("2d");
      context.save();
      context.fillStyle="#EEEEFF";
      context.fillRect(0,0,400,300);
      context.fillStyle="rgba(255,0,0,0.1)";
      context.fillRect(0,0,100,100);
      context.translate(100,100);
      context.scale(0.5,0.5);
      context.rotate(Math.PI/4);
      context.fillRect(0,0,100,100);
      context.restore();
      context.beginPath();
      context.arc(200,50,50,0,2*Math.PI,false);
      context.stroke();
      context.fill();
  }
  window.addEventListener("load",draw,true);
</script>
</body>
</html>

效果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1033231.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

华为云云耀云服务器L实例评测 | 基于minikube搭建单节点kubernetes集群

华为云云耀云服务器L实例评测 | 基于minikube搭建单节点kubernetes集群

目录 1 安装Docker2 conntrack-tools3 安装minikube4 下载二进制&#xff1a;kubeadm、kubectl、kubelet5 准备镜像6 启动minikube7 简单测试 ​ Minikube 是一个使用golang开发的单节点kubernetes集群环境&#xff0c;在资源紧张的情况下&#xff0c;可以用于快速搭建kubernet…
阅读更多...
项目进展（一）-晶振正常输出、焊接驱动芯片、查找芯片手册并学习

项目进展（一）-晶振正常输出、焊接驱动芯片、查找芯片手册并学习

今天的主要工作集中在博士师兄的项目上&#xff0c;效率偏低&#xff0c;主要是一中午的时间都卡在晶振上。在焊接完芯片和晶振之后&#xff0c;测试晶振输出引脚无输出&#xff0c;所以就开始找各种博客&#xff0c;寻找晶振不起振的原因&#xff0c;在下面两篇文章中找到了答…
阅读更多...
基于骨架的动作识别：SkeleTR: Towrads Skeleton-based Action Recognition in the Wild

基于骨架的动作识别：SkeleTR: Towrads Skeleton-based Action Recognition in the Wild

论文作者&#xff1a;Haodong Duan,Mingze Xu,Bing Shuai,Davide Modolo,Zhuowen Tu,Joseph Tighe,Alessandro Bergamo 作者单位&#xff1a;The Chinese University of Hong Kong; AWS AI Labs. 论文链接&#xff1a;http://arxiv.org/abs/2309.11445v1 内容简介&#xff1…
阅读更多...
JavaScript+canvas实现粒子动画效果

JavaScript+canvas实现粒子动画效果

1.HTML部分 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>粒子效果</title><style&g…
阅读更多...
OpenAI官方吴达恩《ChatGPT Prompt Engineering 提示词工程师》（7）聊天机器人 / ChatBot

OpenAI官方吴达恩《ChatGPT Prompt Engineering 提示词工程师》（7）聊天机器人 / ChatBot

聊天机器人 / ChatBot 使用大型语言模型来构建你的自定义聊天机器人 在本视频中&#xff0c;你将学习使用OpenAI ChatCompletions格式的组件构建一个机器人。 环境准备 首先&#xff0c;我们将像往常一样设置OpenAI Python包。 import os import openai from dotenv import…
阅读更多...
图像练习-答题卡opencv(02)

图像练习-答题卡opencv(02)

原图 结果 代码 // Load source imagecv::Mat src cv::imread("answer_card.jpg", cv::IMREAD_COLOR);if (src.empty()){return;}cv::Mat gray;cv::cvtColor(src, gray, cv::COLOR_BGR2GRAY);cv::Mat binary;double value cv::threshold(gray, binary, 0, 255, …
阅读更多...
用PHP实现极验验证功能

用PHP实现极验验证功能

极验验证是一种防机器人的验证机制&#xff0c;可以通过图像识别等方式来判断用户是否为真实用户。在实现极验验证功能时&#xff0c;您需要进行以下步骤&#xff1a; 1 注册极验账号&#xff1a; 首先&#xff0c;您需要在极验官网注册账号并创建一个应用&#xff0c;获取相应…
阅读更多...
x_ctf_b0verfl0w

x_ctf_b0verfl0w

x_ctf_b0verfl0w Arch: i386-32-little RELRO: Partial RELRO Stack: No canary found NX: NX disabled PIE: No PIE (0x8048000) RWX: Has RWX segments32位&#xff0c;保护全关&#xff0c;写shellcode int vul() {char s[32]; // [esp18h] [eb…
阅读更多...
mac安装 scala 详细教程（包含在 idea 上使用，以及scala插件安装）

mac安装 scala 详细教程（包含在 idea 上使用，以及scala插件安装）

目录 一 下载解压 二 配置环境变量 三 测试 scala 四 idea 编写 scala 文件 1. 安装插件 scala 插件 2. 使用 idea 创建 scala 工程 3. 使用idea 创建 maven 工程开发 scala 一 下载解压 去官网选择合适的版本下载 官网地址https://www.scala-lang.org/download/all.…
阅读更多...
RocketMQ高性能核心原理与源码架构剖析

RocketMQ高性能核心原理与源码架构剖析

文章目录 1、源码环境搭建1.1、主要功能模块1.2、源码启动服务1.2.1、 启动nameServer1.2.2、 启动Broker1.2.3、 发送消息1.2.4、 消费消息 2、源码剖析2.1、NameServer的启动过程2.2、Broker服务启动过程2.3、Netty服务注册框架2.3.1、关注重点2.3.2、源码重点 1、源码环境搭…
阅读更多...
进化的京东云DaaS：向大模型要解

进化的京东云DaaS：向大模型要解

通过新的DaaS大模型模式&#xff0c;京东云想要为企业提供的增长路径&#xff0c;恰是从最原始的“要数据”真正进阶到最终的“出效果”&#xff0c;将大模型和京东对增长的理解封装到整个产品矩阵中&#xff0c;帮助企业构建最适合AI时代的增长底盘。 作者|皮爷 出品|产业…
阅读更多...
如何保障汽车嵌入式软件的质量与安全？您需要了解ASPICE标准

如何保障汽车嵌入式软件的质量与安全？您需要了解ASPICE标准

汽车软件开发流程改进与能力确定&#xff08;Automotive SPICE或ASPICE&#xff09;是一个流程评估模型&#xff0c;它帮助汽车原始设备制造商&#xff08;OEM&#xff09;和供应商评估当前企业软件开发流程的性能和成熟度水平。 遵守这一标准&#xff0c;有助于汽车供应商确保…
阅读更多...
Apache Flume

Apache Flume

Flume 1.9.0 Developer Guide【Flume 1.9.0开发人员指南】 Introduction【介绍】 摘自&#xff1a;Flume 1.9.0 Developer Guide — Apache Flume Overview【概述】 Apache Flume is a distributed, reliable, and available system for efficiently collecting, aggregati…
阅读更多...
迁移 MySQL 数据到 OceanBase 集群

迁移 MySQL 数据到 OceanBase 集群

使用 mysqldump 将 mysql的表结构和数据同步到 OceanBase 的MySQL 租户中 Mysql数据库导出 mysqldump -h127.0.0.1 -P3306 -uroot –p --single-transaction --hex-blob --routines --events --triggers --set-gtid-purgedOFF --databases teller >teller.sql mysql> …
阅读更多...
sentinel环境搭建以及微服务接入

sentinel环境搭建以及微服务接入

• sentinel部署 • sentinel-镜像制造 • sentinel-镜像推送 • sentinel-部署配置文件 • 访问控制台 • 外网访问控制台 • 集群内访问 • 配置规则 • 限流效果 • 微服务接入 • pom文件引入依赖 • pod部署文件添加配置 Sentinel 控制台是流量控制、熔断降级规则统一配置…
阅读更多...
下载github.com上的依赖资源

下载github.com上的依赖资源

下载github.com上的依赖资源&#xff08;需要反复试才能成功&#xff0c;所以单独安装&#xff09; export GIT_TRACE1 export GIT_CURL_VERBOSE1 pip install githttps://github.com/PanQiWei/AutoGPTQ.git -i https://pypi.mirrors.ustc.edu.cn/simple --trusted-hostpypi.mi…
阅读更多...
.NET 8 中的 WPF File Dialog 改进

.NET 8 中的 WPF File Dialog 改进

作者&#xff1a;Dipesh Kumar 排版&#xff1a;Alan Wang 我们很高兴宣布从 .NET 8 Preview 7 开始&#xff0c;对 WPF 中的通用文件对话框 API 进行了一系列新的改进。其中包括迄今为止存储库中投票最多的 API 建议 – 允许用户选择文件夹的 OpenFolderDialog 控件 – 以及文…
阅读更多...
灾备系统中虚拟机的有代理备份与无代理备份之间的差异

灾备系统中虚拟机的有代理备份与无代理备份之间的差异

虚拟机的有代理备份是在虚拟机内部安装备份代理程序&#xff0c;然后把虚拟机当作物理机一样来进行备份任务。借助虚拟机系统中内置的程序来进行备份的&#xff0c;就像在正常系统中备份那样&#xff0c;借助备份和还原&#xff08;Windows7&#xff09;功能对系统进行备份。但…
阅读更多...
buuctf web [极客大挑战 2019]BabySQL

buuctf web [极客大挑战 2019]BabySQL

又是你&#xff0c;还来&#xff1f;好好好 依旧老方法&#xff0c;先试探一手 有错误&#xff1f; 你有一个错误在你的SQL语法;检查与您的MariaDB服务器版本对应的手册&#xff0c;以便在第1行11#和password1 "附近使用正确的语法 看来是or被过滤了&#xff0c;试试双写…
阅读更多...
五、核支持向量机算法(NuSVC，Nu-Support Vector Classification)（有监督学习）

五、核支持向量机算法(NuSVC，Nu-Support Vector Classification)（有监督学习）

和支持向量分类(Nu-Support Vector Classification)&#xff0c;与 SVC 类似&#xff0c;但使用一个参数来控制支持向量的数量&#xff0c;其实现基于libsvm 一、算法思路 本质都是SVM中的一种优化&#xff0c;原理都类似&#xff0c;详细算法思路可以参考博文&#xff1a;三…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023