Canvas与SVG

牛奶皮子

已于 2024-06-13 09:42:14 修改

阅读量366

点赞数 12

分类专栏： HTML+CSS+JS 文章标签： javascript 前端 html

于 2024-01-15 15:30:39 首次发布

本文链接：https://blog.csdn.net/m0_61368323/article/details/135593211

版权

HTML+CSS+JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. Canvas默认宽300px、高150px。

2. 渲染上下文

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

3. canvas三种绘制矩形的方法：

（1）fillRect ( x , y , width , height ) :绘制填充的矩形

（2）strokeRect(x,y,width,height):绘制矩形的边框

（3）clearRect(x,y,width,height):清除指定区域的矩形

4. 绘制路径

绘制方法有：

（1）beginPath()：新建一条路径

（2）moveTo(x,y)：把画笔移到指定的坐标上

（3）closePath()：闭合路径

（4）stroke()：绘制路径

（5）fill()：填充路径的内容区域

5. 绘制圆弧

(1)：arc ( x , y , r , startAngle , endAngle , anticlockwise)：以（x,y）为圆心，r为半径，从startAngle弧度开始到endAngle弧度结束。anticlockwise是true表示逆时针，false表示顺时针。

(2)：arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

6. 添加样式和颜色

（1）fillStyle = color 设置图形的填充颜色

（2）strokeStyle = color 设置图形轮廓的颜色

7. 绘制文本

（1）fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

（2）strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

8. 绘制图片

<canvas id="tutorial" width="600" height="400"></canvas>
function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    var img = document.querySelector("img");
    ctx.drawImage(img, 0, 0);
}
document.querySelector("img").onclick = function (){
    draw();
}

缩放图片：drawImage(image, x, y, width, height)---width 和 height，这两个参数用来控制当像 canvas 画入时应该缩放的大小。

切片：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)---前 4 个是定义图像源的切片位置和大小，后 4 个则是定义切片的目标显示位置和大小。

9. canvas跨域污染问题

问题：当你在一个网页中加载来自其他域名的图像时，浏览器会执行跨域检查来确保安全性。如果图像源和网页源不属于同一个域，浏览器会阻止对图像的访问，这被称为同源策略。例如从CDN（内容分发网络）获取图像或在使用Canvas进行图像处理时。

回答：为了实现这个目标，可以设置图像元素的crossOrigin属性为"anonymous"。这样设置之后，浏览器会在请求图像时发送额外的HTTP头部，告诉服务器允许其被跨域访问。服务器可以根据这个头部来决定是否允许跨域访问。

const image = new Image();//创建一个空的<img>元素
image.src = 'path/to/image.jpg';
image.setAttribute("crossOrigin", "anonymous");//设置图像加载时的跨域属性

image.onload = function() {
  // 图像加载完成后执行的操作
  console.log('图像加载完成！');
};

image.onerror = function() {
  // 图像加载失败时执行的操作
  console.log('图像加载失败！');
};

crossorigin 属性在 <audio>、<img>、<link>、<script> 和 <video> 元素中有效。crossorigin属性

10. toBlob()方法

此方法可以把Canvas图像缓存在磁盘上，或者存储在内存中，这个往往由浏览器决定。

canvas.toBlob((blob) => {
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a"); //创建一个a链接
          a.download = name || "photo"; //给a链接的download属性赋值
          a.href = url;
          a.click();
          a.remove();
          URL.revokeObjectURL(url);
});

canvas.toBlob()的使用

11. canvas与svg的区别

1. Canvas 通过 JavaScript 来绘制 2D 图形，SVG 是一种使用 XML 描述 2D 图形的语言。

2. Canvas不支持事件处理器，SVG支持事件处理器。（因为canvas绘制的都在canvas画布里面，需要修改时，只能在画布里修改，不能通过JS获取；而svg是通过添加DOM节点来实现的，添加svg标签，可以通过JS获取，进行修改）
// 获取元素
var rect1 = document.getElementById(“r1”);
var rect2 = document.getElementById(“r2”);

// 改变元素的填充颜色：
rect1.style.fill = “yellow”;
rect2.style.fill = “pink”;

总结：

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用