HTML5 CSS3 melukis bergerigi rectangle_html5 petua tutorial-Tutorial H5-php.cn

HTML5 CSS3 melukis bergerigi rectangle_html5 petua tutorial

WBOY

Lepaskan： 2016-05-16 15:45:49

asal

2426 orang telah melayarinya

Baru-baru ini, saya telah berkongsi beberapa ilmu yang saya rasa berbaloi untuk dipelajari dengan menaip Html5 Css3 dan berkongsi dengan semua orang.

Cara melukis segi empat bergerigi: seperti yang ditunjukkan

Kami tahu bahawa kanvas boleh digunakan untuk melukis grafik Kanvas ialah teg baharu yang muncul dalam HTML5 dan digunakan untuk melukis grafik pada halaman web menggunakan Javascript untuk melukis grafik pada halaman web.
Segi empat tepat bergerigi di atas dilukis dengan kanvas.

Kod pelaksanaan:

Kod XML/HTMLSalin kandungan ke papan keratan

>
<html lang="en" >
<kepala>
<meta charset="UTF- 8">
<tajuk>锯齿图 🎜>tajuk>
<skrip taip="teks/ javascript">
window.addEventListener("load", eventWindowLoaded, false);
fungsi eventWindowLoaded(){
var x,y;
var theCanvas = dokumen.getElementById("canvas");
var konteks = theKanvas.getContext("2d");
context.strokeStyle = '#CB9A61';
context.lineWidth=10;
context.strokeRect(10, 10, theCanvas.width-20, theCanvas.height-20);
context.fillStyle = "#FFFFFF";
untuk(x=5;x<=canvas.width;xx=x 10){
context.beginPath();
context.arc(x,5,5,0,Math.PI*2,true);
context.arc(x,canvas.height-5,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
untuk(y=5;y<=canvas.height;yy=y 10){
context.beginPath();
context.arc(5,y,5,0,Math.PI*2,true);
context.arc(canvas.width-5,y,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
skrip>
kepala>
<badan>
<div gaya="kedudukan: mutlak; atas: 100px; kiri: 100px;">
<kanvas id="kanvas" lebar="400" tinggi="170" atas=50px; kiri=50px;>
div>
badan>
html>

Cara menulis bentuk seperti ini, segi empat tepat dibahagikan kepada dua bahagian, dipisahkan oleh garis pepenjuru, dua warna. Seperti yang ditunjukkan dalam gambar:

Pada mulanya, ideanya adalah untuk menggunakan div, melukis garis miring di tengah, dan membahagikannya kepada dua bahagian dengan dua warna Namun, ia tidak dilaksanakan Oleh kerana meja depan yang lemah dan keupayaan yang terhad, penyelesaian lain telah difikirkan.

Gunakan tiga div, dua div di kiri dan kanan, dan tetapkan lebar dan tinggi Bahagian ini sebenarnya memainkan peranan penting:

Malah, ia adalah segi empat tepat yang dibahagikan kepada dua segi tiga, dan akhirnya kesan di atas tercapai. Dengan kata lain, ia sangat mudah untuk dilaksanakan dan tidak boleh digantung pada pokok.

Kod adalah seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan

>
<html lang="en" >
<badan gaya="margin: 0 0 0 0;">
<div id="1" gaya="warna latar belakang:#727171;lebar:50px;tinggi:20px;float:kiri" >div>
<div id="2" gaya=" float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171; gaya sempadan:pepejal">div>
<div id="3" gaya="warna latar belakang:#9fa0a0;width:50px;height:20px;float:left" >div>
badan>
html>

Tindakan susulan akan terus meringkaskan beberapa pengetahuan tentang HTML dan CSS Pengetahuan di meja depan mungkin kelihatan mudah, tetapi ia sebenarnya merupakan kerja terperinci yang boleh melatih kesabaran seseorang. Dari mudah kepada kompleks, dari pemula hingga mendalam, perbaiki diri anda sedikit demi sedikit.