HTML5 のどの要素でグラフィックスを描画できるか-フロントエンドQ&A-php.cn

HTML5 のどの要素でグラフィックスを描画できるか

青灯夜游

リリース： 2021-12-17 17:45:28

オリジナル

2433 人が閲覧しました

グラフィックを描画できる HTML5 の要素: 1. JavaScript スクリプトを通じて動的にグラフィックを描画できる「canvas」要素; 2. XML を使用して Web 用のベクターベースのグラフィックを定義できる「SVG」要素フォーマットはグラフィックを定義します。

HTML5 のどの要素でグラフィックスを描画できるか

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 Canvas と SVG ではどちらもブラウザーでグラフィックを作成できますが、根本的に異なります。

SVG

SVG は、XML を使用して 2D グラフィックスを記述する言語です。
SVG は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベントハンドラーを要素にアタッチできます。
SVG では、描画された各形状はオブジェクトとみなされます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。

Canvas

Canvas は JavaScript を使用して 2D グラフィックを描画します。
キャンバスはピクセルごとにレンダリングされます。
キャンバスでは、グラフィックが描画されると、ブラウザの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

1. Canvas

canvas は、HTML5 の新しい HTML5 タグであり、Web ページ上でダイナミックな 2D および 3D 画像を実現できる、キャンバスを操作するための JavaScript API です。。

Canvas では、アニメーション、ゲーム、グラフ、画像処理など、本来 Flash が必要とする機能を完成させることができます。

1. Canvas の作成

<canvas  id="draw" width="600" height="600"></canvas>

ログイン後にコピー

HTML で Canvas タグを作成します。タグ自体で幅と高さを設定するのが最善です。幅と高さを設定した場合、他の方法では、高さは 0.5

var draw=document.getElementById("draw");
//获取画布元素
var draws=draw.getContext("2d");
//给画布一个绘制环境，2d表示在2d环境下绘制
//draws返回的是一个对象

ログイン後にコピー

2 の変位差があります。Draw

//绘制线条

//设置线宽
draws.lineWidth = 10;
//设置线的颜色
draws.strokeStyle = "blue";
            
draws.moveTo(0,0);  //移动画笔到0,0点
draws.lineTo(300,300);  //画线到300,300的位置
draws.stroke();  //执行描边

//绘制矩形
draws.strokeRect(x,y,width,height) //绘制一个边框矩形
draws.fillRect(x,y,width,height) //绘制一个填充矩形

draws.clearRect(x,y,width,height) //清除一个矩形


//绘制圆形
draws.arc(x,y,radius,startAngle,endAngle,anticlockwise)
//arc方法用来绘制一段圆弧路径，以(x,y)圆心位置radius为半径、startAngle为起始弧度、
//endAngle为终止弧度来，而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，
//如果为 true 就是逆时针，false 则为顺时针，Math.PI * 2 刚好为一周。

//绘制图像 
//在html中加入一个img标签 
<img src="1.jpg" id="pic"/>
//在JS中...
//需要将页面中的图片都加载完之后执行
window.onload=function(){



//绘制文字

//描边文字
draws.font="50px microsoft yahei"

//设置描边字体颜色
draws.strokeText("Hello",20,100) 

//设置描边文字内容，和X坐标Y坐标

//填充文字

draws.fillStyle="red"
//设置填充字体颜色
draws.fillText("Hello",20,200); 

//设置填充文字内容，和X坐标Y坐标

ログイン後にコピー

3. いくつかのキャンバスメソッドを理解してください

draws.beginpath()
draws.closepath()
// 二者同时出现  将绘制路径闭合 ,自动将路径闭合


draws.save()
draws.restore()
//二者成对出现 中间的属性样式只影响内部 不影响外部


//translate()
draws.strokeRect(0, 0, 150, 150);

draws.translate(150, 150);

draws.strokeRect(0, 0, 150, 150); //被平移的元素
//平移后这个被平移的元素的坐标就会改变


//rotate()

draws.rotate(0.2);

draws.strokeRect(75, 75, 75, 75); //根据画布的0，0点旋转

ログイン後にコピー

2. SVG

SVG スケーラブルベクターグラフィックス (Scalable Vector Graphics) は、2 次元のベクターグラフィックスを記述するための Extensible Markup Language (XML) に基づくグラフィックス形式です。 SVG は、2000 年 8 月に W3C (「World Wide Web ConSortium」または「International Internet Standards Organisation」) によって策定された新しい 2 次元ベクトルグラフィックス形式です。仕様ではネットワークベクトルグラフィックス標準でもあります。 SVG は XML 構文に厳密に従い、テキスト形式の記述言語を使用して画像コンテンツを記述するため、画像の解像度に依存しないベクトルグラフィック形式です。 SVG は、2003 年 1 月 14 日に W3C 勧告になりました。

機能:

1. 任意のスケーリング

ユーザーは、画像の鮮明さや詳細などを損なうことなく、画像表示を任意に拡大縮小できます。

2. テキストの独立性

SVG 画像内のテキストは画像から独立しており、テキストは引き続き編集および検索可能です。フォントの制限がなくなり、ユーザーのシステムに特定のフォントがインストールされていない場合でも、作成時とまったく同じ画面が表示されます。

3. より小さいファイル

一般に、SVG ファイルは GIF や JPEG 形式のファイルよりもはるかに小さいため、ダウンロードは速くなります。

4. スーパー表示効果

SVG 画像は画面上で常に鮮明なエッジを持ち、その鮮明さはどのような画面解像度や印刷解像度にも適しています。

5. スーパーカラーコントロール

SVG 画像は 1,600 万色のパレットを提供し、ICC カラープロファイル標準、RGB、ライン X 塗りつぶし、グラデーション、マスクをサポートします。

6. インタラクションとインテリジェンス。 SVG が直面する主な問題の 1 つは、すでに重要な市場シェアを占めているベクターグラフィックス形式である Flash とどのように競争するかということであり、もう 1 つは、ローカルのオペレーティング環境における SVG に対するメーカーのサポートの程度です。

ブラウザのサポート:

Internet Explorer9、Firefox、Google Chrome、Opera、Safari はすべて SVG をサポートしています。
IE8 以前のバージョンには、無料で入手できる Adobe SVG Browser などのプラグインが必要です。

#1. 導入方法

方法 1:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
绘制图形
</svg>

ログイン後にコピー

xmlns: namespace

<img src="01.svg" alt="">

ログイン後にコピー

<svg>

//绘制直线

 <line x1="0" y1="0" x2="500" y2="500" style="stroke:rgb(0,0,255);stroke-width:3"></line>

//参数：
//x1 属性在 x 轴定义线条的开始
//y1 属性在 y 轴定义线条的开始
//x2 属性在 x 轴定义线条的结束
//y2 属性在 y 轴定义线条的结束

//绘制圆形、椭圆

<circle r="50" cx="110" cy="60" fill="lightskyblue"></circle>

<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:dodgerblue;stroke-width:5"><ellipse/>

//参数
//CX属性定义的椭圆中心的x坐标
//CY属性定义的椭圆中心的y坐标
//RX属性定义的水平半径
//RY属性定义的垂直半径

//绘制文本

<text x="0" y="50" fill="blue" style="font-size:30px; font-family: &#39;microsoft yahei&#39;;">My Text</text>


//绘制矩形

 <rect x="40" y="60" width="260" height="260" style="fill:blue;stroke:pink;stroke-width:5;

//绘制图像

<image x="20" y="20" width="100" height="80" xlink:href="./img/1.jpg"></image>

//绘制路径 

<path d="M70 0 L100 150 L40 150 Z" stroke="plum" fill="plum" ></path>

//参数
//M是起点坐标 L是相邻点坐标 Z让路径构成闭合回路
//H代表水平的线条 默认y轴上的值一样
//V 代表垂直的线条 默认x轴上的值一样/
//A 后面跟七个值

//绘制多边形

<Polygon points=””></polygon>

//points：多边形的点

//绘制折线

<polyline points=”” ></polyline>

//points：折线的点
 
</svg>

ログイン後にコピー

を描画します。関連する推奨事項: "htmlビデオチュートリアル
>>
以上がHTML5 のどの要素でグラフィックスを描画できるかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。