Canvas 矩形を描く

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

こんにちは。ましじめの田村です。

Canvasで矩形を描く場合がありました。
この場合次の方法で実現出来そうです。

矩形を描く

<canvas id='canvas'></canvas>
// Canvas の取得
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
context.fillStyle = 'rgba(0,0,0,.68)';

//矩形
context.fillRect(0, 0, 80, 80);

//輪郭
context.strokeRect(90, 0, 80, 80);

//切り抜き
context.fillRect(180, 0, 80, 80);
context.clearRect(185, 5, 70, 70);

以上「Canvas 矩形を描く」でした。 Canvasに図形を描きたい場合に参考にしてみてください。


関連するタグ

全 1 件中 1 〜 1 件目を表示

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから