Elemen mana dalam HTML5 boleh melukis grafik

Elemen yang boleh melukis grafik dalam HTML5: 1. elemen "kanvas", yang boleh melukis grafik secara dinamik melalui skrip JavaScript; 2. Elemen "SVG", yang boleh mentakrifkan grafik berasaskan vektor untuk rangkaian, menggunakan XML Format mentakrifkan grafik.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Kanvas HTML5 dan SVG kedua-duanya membenarkan anda membuat grafik dalam penyemak imbas, tetapi ia pada asasnya berbeza.

SVG

• SVG ialah bahasa yang menggunakan XML untuk menerangkan grafik 2D.

• SVG adalah berdasarkan XML, yang bermaksud setiap elemen dalam SVG DOM tersedia. Anda boleh melampirkan pengendali acara JavaScript pada elemen.

• Dalam SVG, setiap bentuk yang dilukis dianggap sebagai objek. Jika sifat objek SVG berubah, penyemak imbas boleh mengeluarkan semula grafik secara automatik.

Kanvas

• Kanvas melukis grafik 2D melalui JavaScript.

• Kanvas dipaparkan piksel demi piksel.

• Dalam kanvas, sebaik sahaja grafik dilukis, ia tidak akan menerima perhatian penyemak imbas lagi. Jika kedudukannya berubah, keseluruhan pemandangan perlu dilukis semula, termasuk sebarang objek yang mungkin telah diliputi oleh grafik.

1. Kanvas

kanvas ialah teg HTML5 baharu dalam HTML5 dan API javascript untuk mengendalikan imej 2D dan 3D dalam teknologi . Perbezaan penting antara penanda dan SVG dan VML ialah mempunyai API lukisan berasaskan JavaScript, manakala SVG dan VML menggunakan dokumen XML untuk menerangkan lukisan. Lukisan SVG mudah diedit dan dijana, tetapi kurang berkuasa.

Kanvas boleh melengkapkan animasi, permainan, carta, pemprosesan imej dan fungsi lain yang pada asalnya memerlukan Flash.

1. Cipta kanvas

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

Cipta teg kanvas dalam HTML Adalah lebih baik untuk menetapkan lebar dan tinggi dalam teg itu sendiri kaedah untuk menetapkan lebar Ketinggian akan mempunyai perbezaan sesaran 0.5

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

2 Lukisan

//绘制线条

//设置线宽
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

Grafik Vektor Boleh Skala SVG (Grafik Vektor Boleh Skala) ialah format grafik berdasarkan Bahasa Penanda Boleh Diperluas (XML) dan digunakan untuk menerangkan vektor dua dimensi grafik. SVG ialah format grafik vektor dua dimensi baharu yang dirumuskan oleh W3C ("World Wide Web ConSortium" atau "Pertubuhan Piawaian Internet Antarabangsa") pada Ogos 2000. Ia juga merupakan piawai grafik vektor rangkaian dalam spesifikasi. SVG mengikut sintaks XML dengan ketat dan menggunakan bahasa deskriptif dalam format teks untuk menerangkan kandungan imej Oleh itu, ia adalah format grafik vektor yang bebas daripada peleraian imej. SVG menjadi Pengesyoran W3C pada 14 Januari 2003.

Ciri-ciri:

1. Mana-mana penskalaan

Pengguna boleh menskalakan paparan imej sewenang-wenangnya tanpa merosakkan kejelasan, butiran, dsb.

2. Teks adalah bebas

Teks dalam imej SVG adalah bebas daripada imej dan teks kekal boleh diedit dan dicari. Tidak akan ada lagi sekatan fon Walaupun fon tertentu tidak dipasang pada sistem pengguna, mereka akan melihat skrin yang sama seperti semasa mereka menciptanya.

3. Fail yang lebih kecil

Secara umumnya, fail SVG jauh lebih kecil daripada fail dalam format GIF dan JPEG, jadi ia memuat turun dengan cepat.

4. Kesan paparan super

Imej SVG sentiasa mempunyai tepi yang jelas pada skrin dan kejelasannya sesuai untuk sebarang resolusi skrin dan resolusi pencetakan.

5. Kawalan warna super

Imej SVG menyediakan palet 16 juta warna, menyokong piawaian profil warna ICC, RGB, isian garisan X, kecerunan dan topeng.

6. Interaksi dan kecerdasan. Salah satu masalah utama yang dihadapi SVG ialah cara bersaing dengan Flash, format grafik vektor yang sudah menduduki bahagian pasaran yang penting Masalah lain ialah tahap sokongan pengeluar untuk SVG dalam persekitaran operasi tempatannya.

Sokongan penyemak imbas:

Internet Explorer9, Firefox, Google Chrome, Opera dan Safari semuanya menyokong SVG.
IE8 dan versi terdahulu memerlukan pemalam - seperti Pelayar Adobe SVG, yang tersedia secara percuma.

1. Kaedah pengenalan

Kaedah 1:

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

• xmlns: ruang nama

• versi: versi

Kaedah 2:

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

2 Lukis

<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>

Cadangan berkaitan: "tutorial video html"

Atas ialah kandungan terperinci Elemen mana dalam HTML5 boleh melukis grafik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!