canvas与svg基本使用

最新推荐文章于 2024-07-12 16:55:56 发布

小方很无聊

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量386

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/m0_72270036/article/details/136890915

版权

本文详细介绍了如何使用HTML5的

摘要由CSDN通过智能技术生成

一、canvas

<canvas> 标签

使用 HTML5 中的 <canvas> 标签在网页中创建一个画布

<canvas id="canvas" width="400" height="300"></canvas>

1. context 对象可以使用 getContext() 方法获得。

let canvas = document.getElementById("canvas");
let context = canvas.getContext('2d');

2.moveTo(x, y) 方法来定义初始位置

context.moveTo(x, y);

3.连线端点lineTo

context.lineTo(x, y);

4.closePath可以起始点连接终点

5.设置线条宽度：使用 lineWidth 属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。

context.lineWidth = 10;

6.设置描边颜色：使用 strokeStyle 属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色的英文名。

context.strokeStyle = '#f00';
context.strokeStyle = 'red';

7.fillStyle 和fill设置图形的填充的颜色

  context.fillStyle = "blue";
  context.fill();

8.绘制矩形，用strokeRect，有4个参数分别是：画布离左侧的距离、画布离右侧的距离、宽度、高度

context.strokeRect(50,50,200,100);

9.清除画布,用clearRect，有4个参数分别是：画布离左侧的距离、画布离右侧的距离、宽度、高度

 context.clearRect(200, 100, 50, 50);

10.font 设置文字样式，顺序：字体的样式（是否正常倾斜等）、字体的粗细、字体的大小、字体的类型，

context.font = "italic bold 16px 微软雅黑";  //斜体 加粗 16像素 微软雅黑

11.绘制文字，用fillText，参数有：文本、起始坐标

context.fillText("文字", 100, 100)

12.stroke() 方法，实现线的可视效果。可一直调用

context.stroke();
context.moveTo(10, 10);  
context.lineTo(100, 10);  
context.stroke(); // 绘制第一条线  
context.lineTo(100, 100);  
context.stroke(); // 绘制第二条线，与第一条线相连

13.beginPath开辟新的路径，

  context.moveTo(10, 10);
  context.lineTo(100, 10);
  context.stroke(); // 绘制第一条线条

  context.beginPath(); // 开始新的路径，第二条线与第一条线不相连  
  context.moveTo(10, 20);
  context.lineTo(100, 20);
  context.stroke(); // 绘制第二条线条

使用canvas写一个柱形图：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas {
      margin: 50px auto;
      display: block;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <canvas width="800" height="430"></canvas>
</body>

</html>
<script>
  let canvas = document.querySelector('canvas')
  let ctx = canvas.getContext('2d')
  // 绘制文本
  ctx.font = '18px 微软雅黑'
  ctx.fillText('柱形图', 50, 50)
  // 绘制线段
  ctx.moveTo(100, 100)
  ctx.lineTo(100, 400)
  ctx.lineTo(700, 400)
  ctx.stroke()
  // 绘制其他的线
  ctx.moveTo(100, 100)
  ctx.lineTo(700, 100)
  // 底部文字
  ctx.fillText('150', 60, 105)

  ctx.moveTo(100, 160)
  ctx.lineTo(700, 160)
  // 底部文字
  ctx.fillText('120', 60, 165)


  ctx.moveTo(100, 220)
  ctx.lineTo(700, 220)
  // 底部文字
  ctx.fillText('90', 65, 225)

  ctx.moveTo(100, 280)
  ctx.lineTo(700, 280)
  // 底部文字
  ctx.fillText('60', 65, 285)

  ctx.moveTo(100, 340)
  ctx.lineTo(700, 340)
  // 底部文字
  ctx.fillText('30', 65, 345)
  ctx.fillText('0', 70, 408)

  ctx.stroke()
  // 绘制水平轴底部的线段
  ctx.moveTo(250, 400)
  ctx.lineTo(250, 410)
  // 底部文字
  ctx.fillText('食品', 165, 420)

  ctx.moveTo(400, 400)
  ctx.lineTo(400, 410)
  // 底部文字
  ctx.fillText('数码', 315, 420)

  ctx.moveTo(550, 400)
  ctx.lineTo(550, 410)
  // 底部文字
  ctx.fillText('服饰', 460, 420)
  ctx.fillText('箱包', 620, 420)

  ctx.stroke()
  // 绘制矩形
  ctx.fillStyle = 'red'
  ctx.fillRect(130, 250, 100, 150)
  ctx.fillRect(280, 200, 100, 200)
  ctx.fillRect(430, 120, 100, 280)
  ctx.fillRect(580, 220, 100, 180)

</script>

二、svg

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 300px;
      height: 300px;
      border: 1px solid pink;
      display: block;
    }
  </style>
</head>

<body>
  <!-- svg双闭合标签:默认宽度与高度300 * 150 svg绘制图形务必在svg标签内部使用绘制图形 -->


  <!-- x1,y1是第一个点的坐标,x2,y2是第二个点的坐标   stroke-width="20"改变线的宽度-->
  1.<svg class="box">
    <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
    <line x1="100" y1="200" x2="200" y2="100" stroke="blue"></line>
  </svg>
  <!-- 绘制折线 points="点的坐标，点的坐标......"  fill-opacity="0.5" 设置填充颜色的透明度 stroke="red"设置描边-->
  2.<svg class="box">
    <polyline points="200 200, 50 100, 120 240,120 120" fill-opacity="0.5" stroke="red"></polyline>
  </svg>
  3. <!-- 绘制矩形  x/y：绘图位置， stroke：描边的颜色。 stroke-width：描边的宽度  rx/ry：描边的圆角 fill="pink"改变填充的颜色-->
  <svg class="box">
    <rect width="100" height="100" x="100" y="100" fill="blue" stroke="green" stroke-width="2" rx="10"></rect>
  </svg>
  4.<!--绘制圆形  cx圆形中心的x轴坐标, cy圆形中心的y轴坐标,r圆形的半径, stroke:pink 描边颜色  fill:red 填充颜色-->
  <svg class="box">
    <circle cx="150" cy="95" r="50" style="stroke:pink;fill:red"></circle>
  </svg>
  5. <!--绘制椭圆  cx="椭圆中心点的x坐标", cy="椭圆中心点的y坐标", rx="椭圆在x轴方向上的半径" ry="椭圆在y轴方向上的半径" ,fill 填充颜色,stroke边框的颜色 -->
  <svg class="box">
    <ellipse cx="150" cy="150" rx="100" ry="50" style="fill:red"></ellipse>
  </svg>
  6. <!--绘制多边形  points="点的坐标，点的坐标......"  -->
  <svg class="box">
    <polygon points="50 200, 100 150, 250 220,280 260" stroke="red" fill-opacity="0"></polygon>
  </svg>
  7.<!-- 绘制任意形状 M：将当前点移动到指定的坐标位置。L：从当前点绘制一条直线到指定的坐标位置 。
  H：从当前点绘制一条水平线到指定的x坐标位置(x坐标,示例中(10,50)到(280,50))。V：从当前点绘制一条垂直线到指定的y坐标位置(280,20)到(280,200)。
  C:从当前点绘制一条三次贝塞尔曲线到指定的坐标位置,实例中C 250 200, 200 250, 150 150代表从(250,200)经过(200,250)到(150,150)画一条曲线,
  Z：将当前点连接到路径的起始点，闭合路径
  -->
  <svg class="box">
    <path d="M 20 5 L 50 50 H 10 280 V 20 200 C 250 200, 200 250, 150 150 Z"
      style="fill:none;stroke:black;stroke-width:2" />
  </svg>
</body>

</html>

小方很无聊

关注

9
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
canvas与svg基本使用

6.设置描边颜色：使用 strokeStyle 属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色的英文名。8.绘制矩形，用strokeRect，有4个参数分别是：画布离左侧的距离、画布离右侧的距离、宽度、高度。10.font 设置文字样式，顺序：字体的样式（是否正常倾斜等）、字体的粗细、字体的大小、字体的类型，9.清除画布,用clearRect，有4个参数分别是：画布离左侧的距离、画布离右侧的距离、宽度、高度。12.stroke() 方法，实现线的可视效果。使用 HTML5 中的。
复制链接

扫一扫