ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5の基礎知識まとめ

HTML5の基礎知識まとめ

大家讲道理オリジナル: 2016-11-09 11:54:221297ブラウズ

1. キャンバス描画

手順

キャンバス要素を追加、IDと範囲を定義
jsでキャンバス要素を取得
getContext()メソッドで2D描画環境を取得
さまざまな機能グラフィック描画を実行します

座標位置決め

描画されたグラフィックの位置は、キャンバスの左上隅を(0,0)原点に基づいて配置されます

直線を描画します

moveTo(): 始点を指定
lineTo(): 始点から指定された座標まで直線を描く
stroking(): 直線を描く関数を実装
fill(): 塗りつぶし関数の実装

例: 三角形を描画

htmlコード

<body> <canvas id="canvas"></canvas> </body>

jsコード

window.onload = function(){ var canvas = document.getElementById("canvas");
  canvas.width = 800;
  canvas.height = 800; var context  = canvas.getContext(&#39;2d&#39;);
  context.strokeStyle = "red";
  context.moveTo(100, 100);
  context.lineTo(200, 100);
  context.lineTo(150,50);
  context.lineTo(100,100);
  context.stroke();
};

HTML5の基礎知識まとめ

長方形を描画

fillStyle() ：長方形を設定します塗りつぶしの色。
fillRect(x,y,width,height)。
ストロークスタイル(): 長方形の輪郭の色を設定します。
ストロークRect(x,y,幅,高さ)。

円(円弧)を描く

beginPath(): ルートの描画を開始
arc(x,y,radius,startAngle,endAngle,anti時計回り)
描画の中心点、半径、開始点を設定しますポイントの開始角度、終了角度、描画方向。

ベジェ曲線

二次ベジェ曲線

quadraticCurveTo(cp1x,cp1y,x,y)
cp1x,cp1y は制御点の座標を表し、x,y は終点の座標を表します。

3次ベジェ曲線

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x、cp1yおよびcp2x、cp2yはそれぞれ
2つの制御点を表します。

例1: 五芒星を描く

window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext(&#39;2d&#39;);
    drawStar(context, 120, 120, 80, 30, 10, "yellow", 0);
} function drawStar(context, x, y, R, r, width, color, rotation) {
    context.beginPath(); for (var i = 0; i < 5; i++) {
        context.lineTo(Math.cos((18 + i * 72 - rotation) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - rotation) / 180 * Math.PI) * R + y);
        context.lineTo(Math.cos((54 + i * 72 - rotation) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 - rotation) / 180 * Math.PI) * r + y);
    }
    context.closePath();
    context.lineWidth = width;
    context.fillStyle = color;
    context.fill();
}

HTML5の基礎知識まとめ

例2: BMWのロゴを描く

window.onload = function() { var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 800; var context = canvas.getContext(&#39;2d&#39;); //圆心坐标x,y  内圆半径r  外圆半径R var x = 100; var y = 100; var r = 100; var R = r + 50; var colors = Array("#87CEFA", "#FAFAFA", "#000");
    context.beginPath();
    context.translate(100, 100);
    context.arc(x, y, R, 0, Math.PI * 2);
    line_gra = context.createLinearGradient(-10, -10,20, 50);
    line_gra.addColorStop(0, "#ddd");
    line_gra.addColorStop(1, "#262626");
    context.lineWidth = 3;
    context.strokeStyle = "#000";
    context.fillStyle = line_gra;
    context.closePath();
    context.stroke();
    context.fill();
    drawBigRound(context, x, y, r, 53, "#ADD8E6", 7);
    drawBm(context, x, y, r, colors);
    drawBigRound(context, x, y, r, 3, "#9FB6CD", 5);
    context.beginPath();
    context.fillStyle = "#fff";
    context.font = "bold 40px verdana";
    context.fillText("M", 80, -10);
    context.rotate(Math.PI / 6);
    context.fillText("W", 125, -75);
    context.rotate(-(Math.PI / 2));
    context.fillText("B", 0, 35);
    context.restore();
} function drawBm(context, x, y, r, colors) { var color; for (var i = 0; i < 4; i++) {
        context.beginPath();
        context.moveTo(x, y);
        context.arc(x, y, r, Math.PI * i / 2, Math.PI * (i + 1) / 2); if (i == 0 || i == 2) {
            color = colors[0];
        } else {
            color = colors[1];
        }
        context.fillStyle = color;
        context.lineWidth = 2;
        context.strokeStyle = colors[2];
        context.closePath();
        context.fill();
        context.stroke();
    }
} function drawBigRound(context, x, y, r, addr, color, lineWidth) {
    context.beginPath();
    context.arc(x, y, r + addr, 0, Math.PI * 2);
    context.lineWidth = lineWidth;
    context.strokeStyle = color;
    context.closePath();
    context.stroke();
}

HTML5の基礎知識まとめ

2 CSS3 シャドウ box-shadow

box-shadow: h -shadow v -shadow ブラースプレッドカラーインセット;

h-shadow が必要です。水平方向の影の位置。負の値も許可されます。
v-shadow が必要です。垂直影の位置。負の値も許可されます。
ぼかしオプション。曖昧な距離。
スプレッドはオプションです。影のサイズ。
色はオプションです。影の色。 CSS カラー値を参照してください。
インセットはオプションです。外側のシャドウ（アウトセット）を内側のシャドウに変更します。

3.CSS3 変換属性

transform: none|transform-functions;

transform:rotate(): 回転、deg は度を意味します

transform: rotate(-10deg);

transform:skew() : 傾き

transform:skew(20deg);

transform:scale(): スケール、x方向に2倍、y方向に1.5倍

transform: scale(2, 1.5);

transform:translate(): Translate、x方向に120pxを平行移動、 y 方向に 10px

transform:translate(120px,10px);

4.CSS3 トランジションプロパティ

transition: propertydurationtiming-function late;

transition-property は、トランジション効果を設定する CSS プロパティの名前を指定します。
transition-duration は、トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 WebSocketの詳しい説明次の記事：HTML5 WebSocketの詳しい説明

続きを見る

HTML5の基礎知識まとめ

関連記事