Javascript中canvas与svg详解

GISer_Jinger

于 2024-07-30 20:03:03 发布

阅读量422

点赞数 11

分类专栏： Javascript Vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_55049655/article/details/140805206

版权

Vue 同时被 2 个专栏收录

37 篇文章 2 订阅

订阅专栏

Javascript

33 篇文章 0 订阅

订阅专栏

Canvas

在JavaScript中，<canvas> 元素用于在网页上绘制图形，如线条、圆形、矩形、图像等。它是一个通过JavaScript和HTML的<canvas>元素来工作的绘图表面。<canvas> 元素自身并不具备绘图能力，它仅仅提供了一个绘图环境（画布），你需要通过JavaScript来绘制图形。

基本使用

HTML中添加<canvas>元素

<canvas id="myCanvas" width="200" height="100"></canvas>

这里，width 和 height 属性指定了画布的宽度和高度（以像素为单位）。你也可以通过CSS来设置尺寸，但出于绘图的精确性考虑，推荐使用属性设置。

使用JavaScript绘制

首先，你需要通过JavaScript获取到这个<canvas>元素，并获取其绘图上下文（context）。绘图上下文是一个封装了绘图功能的对象，它提供了各种绘图方法

var canvas = document.getElementById('myCanvas');  
if (canvas.getContext) {  
    var ctx = canvas.getContext('2d'); // 获取2D绘图上下文  
    // 使用ctx进行绘图  
}

绘制基本图形

矩形

ctx.fillStyle = 'red'; // 设置填充颜色  
ctx.fillRect(10, 10, 50, 50); // 绘制填充的矩形  

ctx.strokeStyle = 'blue'; // 设置边框颜色  
ctx.strokeRect(30, 30, 50, 50); // 绘制边框的矩形

圆形

ctx.beginPath(); // 开始一个新路径  
ctx.arc(95, 50, 40, 0, 2 * Math.PI); // 绘制圆形  
ctx.fillStyle = 'green';  
ctx.fill(); // 填充圆形  
ctx.lineWidth = 5;  
ctx.strokeStyle = 'black';  
ctx.stroke(); // 绘制圆形的边框

线条

ctx.moveTo(0, 0); // 起始点  
ctx.lineTo(200, 100); // 结束点  
ctx.strokeStyle = 'red';  
ctx.lineWidth = 5;  
ctx.stroke(); // 绘制线条

```
文本
```

ctx.font = '30px Arial';  
ctx.fillStyle = 'blue';  
ctx.fillText('Hello, Canvas!', 10, 50); // 在画布上绘制文本

图像

你也可以在<canvas>上绘制图像

var img = new Image();  
img.onload = function() {  
    ctx.drawImage(img, 0, 0); // 绘制图像  
};  
img.src = 'image.jpg'; // 图像路径

-------------------------------------------------

<!DOCTYPE html>  
<html>  
<body>  
  
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000;">  
Your browser does not support the HTML5 canvas tag.  
</canvas>  
  
<script>  
var canvas = document.getElementById("myCanvas");  
var ctx = canvas.getContext("2d");  
var img = new Image();  
  
// 设置图像的源地址  
img.src = 'your-image-url.jpg'; // 请替换为你的图像URL  
  
// 监听图像加载完成事件  
img.onload = function() {  
    // 图像加载完成，现在可以绘制了  
    ctx.drawImage(img, 0, 0, 200, 150); // 绘制图像，参数为：图像对象, x坐标, y坐标, 宽度, 高度  
};  
  
</script>  
  
</body>  
</html>

变换

<canvas> 2D上下文支持多种变换，如平移、缩放、旋转等。

平移

ctx.translate(100, 100); // 之后的绘图将基于新的原点(100, 100)

缩放

ctx.scale(2, 2); // 之后的绘图将放大两倍

```
旋转
```

ctx.rotate(Math.PI / 4); // 之后的绘图将顺时针旋转45度

SVG

在JavaScript中，SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用XML格式定义的二维矢量图形。与Canvas不同，SVG是基于XML的，因此它本质上是文本格式，可以被任何文本编辑器打开和编辑，并且可以直接嵌入到HTML文档中。SVG图形是矢量图形，这意味着它们可以无限缩放而不会失去清晰度。

SVG的基本结构

SVG图像包含在一个<svg>元素内，该元素可以包含多个图形元素，如圆形（<circle>）、矩形（<rect>）、线条（<line>）、多边形（<polygon>）、路径（<path>）等。<svg>元素可以定义宽度（width）和高度（height）属性，也可以包含viewBox属性来定义SVG的视图区域和比例。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">  
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />  
  <rect x="10" y="20" width="80" height="60" style="fill:blue;stroke:red;stroke-width:2" />  
</svg>

在这个例子中，<circle>元素创建了一个圆形，cx和cy属性定义了圆心的位置，r属性定义了半径。stroke和stroke-width属性定义了圆形的边框颜色和宽度，fill属性定义了圆形的填充颜色。<rect>元素创建了一个矩形，x和y属性定义了矩形左上角的位置，width和height属性定义了矩形的宽度和高度。style属性可以用来设置更多的CSS样式。

在JavaScript中操作SVG

你可以使用JavaScript来动态地创建、修改和删除SVG元素。以下是一个示例，展示了如何使用JavaScript在SVG中动态添加一个圆形:

<!DOCTYPE html>  
<html>  
<body>  
  
<svg id="mySVG" width="100" height="100" xmlns="http://www.w3.org/2000/svg"></svg>  
  
<script>  
  // 获取SVG元素  
  var svg = document.getElementById('mySVG');  
  
  // 创建一个圆形元素  
  var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');  
  
  // 设置圆形的属性  
  circle.setAttribute('cx', 50);  
  circle.setAttribute('cy', 50);  
  circle.setAttribute('r', 40);  
  circle.setAttribute('stroke', 'green');  
  circle.setAttribute('stroke-width', 4);  
  circle.setAttribute('fill', 'yellow');  
  
  // 将圆形添加到SVG中  
  svg.appendChild(circle);  
</script>  
  
</body>  
</html>

在这个例子中，document.createElementNS方法用于创建SVG元素，因为SVG元素属于不同的命名空间。然后，我们使用setAttribute方法来设置圆形的属性，并将其添加到SVG元素中。

总结

SVG是一种强大的图形格式，可以在网页中创建高质量的矢量图形。通过结合HTML和JavaScript，你可以创建动态和交互式的SVG图形，这些图形可以在各种设备和屏幕尺寸上保持清晰度和可访问性。

[Cesium]加载GeoJSON并自定义设置符号（以点要素为例）_cesium.geojsondatasource.load 添加图标-CSDN博客

GISer_Jinger

关注

11
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javascript中canvas与svg详解

SVG是一种强大的图形格式，可以在网页中创建高质量的矢量图形。通过结合HTML和JavaScript，你可以创建动态和交互式的SVG图形，这些图形可以在各种设备和屏幕尺寸上保持清晰度和可访问性。[Cesium]加载GeoJSON并自定义设置符号（以点要素为例）_cesium.geojsondatasource.load 添加图标-CSDN博客。
复制链接

扫一扫

专栏目录