1. とはCanvas
Canvasはい、描画ボードとしても知られるHTML5新機能で、必要なグラフィックを描画できます。なぜ表示されるのですか？には 2 次元プロットのセットが存在しないためです。これは要素そのものであり、描画可能な領域を定義するには要素の高さと幅の属性が必要です。領域を定義した後、スクリプトを使用してイメージ要素を描画できます。canvascanvascanvasHTMLAPICanvasHTMLHTMLJavascriptHTML
基本的にグラフィックを描画し、さらにアニメーションを作成し、さらに一歩進んでビデオを処理およびレンダリングすることができます。
2. 基本的な使い方
canvas長方形を描画するには、①canvasキャンバスを作成する、②canvasコンテキストを取得し、描画する内容に応じて対応するものを選択するという2つの手順が必要です。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)]](https://img-blog.csdnimg.cn/7eb6097f9e3f473c85e7fb92e94df159.png#pic_center)
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)]](https://img-blog.csdnimg.cn/0614d17d21644585b677af6a19261564.png#pic_center)
js コードセグメントに次の行があることがわかります。
img.setAttribute("crossorigin", "anonymous");
このコード行を追加しないと何が問題になるのでしょうか? このとき、画像がcanvas汚れるため表示されません。canvas次に、公害とは何かについて話しましょう
4.canvas汚染
canvas上部にクロスドメインの絵を描きます、これがcanvas汚染されていてcanvasこの時点のデータは読み取れません
これは、サードパーティの Web サイトが他の Web サイトから画像データを読み取らないようにするための同一生成元ポリシーの制限です (ユーザーのプライバシーの漏洩を避けるため、Canvasサードパーティの画像のレンダリングはCORS制限されていません)。
この問題をどうやって解決すればよいでしょうか? まず判断すべきことは、絵の反応をコントロールできるかどうかです。
- 画像応答を制御できる場合は、上記の方法を使用し、
CORSクロスドメインを使用し、画像要求が開始されたときに増加させます。crossOrigin = "Anonymous" - そうでない場合は、自分の Web サイトでのみエージェントとして機能できるため、Web サイトと写真のソースが同じになります。