ホームページ > 記事 > ウェブフロントエンド > HTML5 CSS3 描画のギザギザ四角形_html5 チュートリアルのヒント
HTML5 CSS3 描画のギザギザ四角形_html5 チュートリアルのヒント
- WBOYオリジナル
- 2016-05-16 15:45:492408ブラウズ
最近、Html5 Css3 を入力して学ぶ価値があると思われる知識をいくつか共有し、みんなと共有しました。
ギザギザの長方形を描画する方法: 図のように
Canvas は、HTML5 に登場する新しいタグで、Web ページ上にグラフィックを描画するために JavaScript を使用します。
上のギザギザの四角形はキャンバスで描画されています。
実装コード:
XML/HTML コードコンテンツをクリップボードにコピー
- >
- <html lang="en" >
- <頭>
- <メタ charset="UTF- 8">
- <タイトル>锯齿图タイトル>
- <script type="text/ javascript">
- window.addEventListener("load", eventWindowLoaded, false);
- 関数 eventWindowLoaded(){
- var x,y;
- var theCanvas = document.getElementById("canvas");
- var context = theCanvas.getContext("2d");
- context.ストロークスタイル = '#CB9A61';
- context.lineWidth=10;
- context.ストロークRect(10, 10, theCanvas.width-20, theCanvas.height-20);
- context.fillStyle = "#FFFFFF";
- for(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();
- }
- for(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();
- }
- }
- スクリプト>
- 頭>
- <ボディ>
- <div style=" 位置:絶対; 上: 100ピクセル; 左: 100ピクセル;
- <キャンバス id="キャンバス" 幅="400" 高さ="170" トップ=50px; 左=50px;>
- div>
- ボディ>
- html>
このような図形の書き方は、長方形を 2 つの部分に分け、対角線で区切って、2 色を描きます。写真に示すように:
最初は div を使用して中央にスラッシュを描き、2 つの色で 2 つの部分に分割するというアイデアがありましたが、フロントデスクが弱く、機能が限られていたため、別の解決策として実装されませんでした。と考えられました。
左右に 2 つの div を使用して、幅と高さを設定します。この部分は実際に重要な役割を果たします。
実際には、長方形を 2 つの三角形に分割し、最終的に上記の効果が得られます。言い換えれば、実装は非常に簡単であり、木に吊るすことはできません。
コードは次のとおりです:
XML/HTML コードコンテンツをクリップボードにコピー
- >
- <html lang="en" >
- <ボディ スタイル="マージン: 0 0 0 0;">
- <div id="1" スタイル="background-color:#727171;width:50px;height:20px;float:left" >div>
- <div id="2" スタイル=" float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171; border-style:solid">div>
- <div id="3" スタイル="background-color:#9fa0a0;width:50px;height:20px;float:left" >div>
- ボディ>
- html>
引き続き、HTMLとCSSに関する知識をまとめていきます。フロントの知識は簡単そうに見えて、実は根気のいる細かい仕事です。簡単なものから複雑なものまで、初心者から奥深いものまで、少しずつ上達してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。