Canvas理解

最新推荐文章于 2024-07-30 17:19:26 发布

芋圆不想圆

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量1k

点赞数 1

文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/m0_52900946/article/details/124784604

版权

1、什么是`Canvas`

Canvas是HTML5的一个新的特性,canvas又称为画板，我们可以在canvas上绘制我们需要的图形。为什么会出现canvas呢？因为HTML中不存在一套二维的绘图API。Canvas本身是一个HTML元素，需要HTML元素的高度和宽度属性定义出一块可绘制的区域，定义区域后可以使用Javascript的脚本绘制图像的HTML元素。

它可以基本的绘制图形，进一步制作动画，更进一步可以处理和渲染视频

2、基本用法

通过canvas画一个矩形，必须的两步是，①创建canvas画布，②获得canvas上下文，根据需要画的内容选择相应的Canvas API

Canvas API 中文文档

<body>
    <!-- 创建canvas画布 -->
    <canvas id="canvas" width="500" height=""500></canvas>
    <script>
        // 获得canvas 元素
        const canvas =document.getElementById("canvas");
        // 获得canvas上下文（相当于画笔）
        const ctx=canvas.getContext("2d");
        // 设置填充颜色
        ctx.fillStyle="green";
        // 绘制矩形，起点位置(10,10),宽150，高100
        ctx.fillRect(10,10,150,100);
    </script>
</body>

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q4UXvZe9-1652605422613)(image-20220515163451015.png)]

3、图片操作

<body>
  <canvas id="canvas"></canvas>
  <script src="./js/util/util.js" type="module"></script>
</body>

export function blur(src) {
    //设置 canvas 画布
    const canvas = document.querySelector("#canvas");
    canvas.width = 100;
    canvas.height = 100;
    // 获得 canvas 上下文
    const ctx = canvas.getContext("2d");
  
    //Image()函数将会创建一个新的HTMLImageElement实例。它的功能等价document.createElement('img')
    const img = new Image();
    img.src = src;
    // 添加属性crossorigin，增加img元素的跨域支持，设置值为anonymous，表示对此元素的 CORS 请求将不设置凭据标志
    img.setAttribute("crossorigin", "anonymous");
    //当img元素加载完成时执行
    img.onload = function () {
      const { width, height } = canvas;
      //图片裁剪操作
      ctx.drawImage(img, 0, 0, img.width, img.height, 5, 5, width, height);
    };
  }
  
  const src =
    " https://tse1-mm.cn.bing.net/th?id=OIP.M2dHJdmuNPhuODWuMLIK_gHaEo&w=170&h=106&c=8&rs=1&qlt=90&dpr=1.25&pid=3.1&rm=2 ";
  blur(src);

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VOTSOUd8-1652605422614)(image-20220515164534497.png)]

在js代码段中，可以看到有一行

 img.setAttribute("crossorigin", "anonymous");

如果不添加这行代码会有什么问题呢？这时图片将没有办法显示，因为这个canvas是被污染的。接下来说说什么是canvas污染

4、`canvas`污染

将一张跨域的图片绘制到canvas上，这个canvas就是被污染的，此时canvas的数据是读取不到的

这个是同源政策的限制，为了避免第三方网站读取其他网站的图片数据（Canvas渲染第三方图片的时候不受CORS限制，避免用户隐私泄露）

我们要怎么解决这个问题呢？首先要判断是否能控制图片的响应。

如果可以控制图片响应的话，就用上面所说的方法，利用CORS跨域，并在图片请求发起时增加crossOrigin = "Anonymous"
如果不可以的话，就只能自己的网站做个代理，让网站与图片同源

5、drawImage API 中文文档

芋圆不想圆

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas理解

1、什么是Canvas      Canvas是HTML5的一个新的特性,canvas又称为画板，我们可以在canvas上绘制我们需要的图形。为什么会出现canvas呢？因为HTML中不存在一套二维的绘图API。Canvas本身是一个HTML元素，需要HTML元素的高度和宽度属性定义出一块可绘制的区域，定义区域后可以使用Javascript的脚本绘制图像的HTML元素。它可以基本的绘制图形，进一步制作动画，更进一步可以处理和渲染视频2、基本用法
复制链接

扫一扫