編程學(xué)習(xí)網(wǎng) > WEB開發(fā) > HTML5 > HTML5初級(jí)知識(shí)總結(jié)
2016
04-15

HTML5初級(jí)知識(shí)總結(jié)

1.canvas繪制

步驟

  • 添加canvas元素，定義id和范圍
  • js里獲取canvas元素
  • 通過getContext()方法獲取2D繪制環(huán)境
  • 通過不同的函數(shù)進(jìn)行圖形繪制

坐標(biāo)定位

  • 繪制的圖形定位都是以canvas的左上角為(0,0)原點(diǎn)

繪制直線

  • moveTo(): 規(guī)定起始點(diǎn)
  • lineTo(): 從起點(diǎn)繪制到規(guī)定坐標(biāo)的直線
  • stroke(): 實(shí)現(xiàn)繪制直線的功能
  • fill(): 實(shí)現(xiàn)填充功能

實(shí)例：繪制一個(gè)三角形

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('2d');

  context.strokeStyle = "red";
  context.moveTo(100, 100);
  context.lineTo(200, 100);
  context.lineTo(150,50);
  context.lineTo(100,100);
  context.stroke();
};

1.png

繪制矩形

  • fillStyle():設(shè)置矩形填充顏色。
  • fillRect(x,y,width,height)。
  • strokeStyle():設(shè)置矩形輪廓顏色。
  • strokeRect(x,y,width,height)。

繪制圓形(弧形)

  • beginPath():開始繪制路線
  • arc(x,y,radius,startAngle,endAngle,anticlockwise)
    設(shè)置繪制的中心點(diǎn)，半徑，起始角度，結(jié)束角度和繪制方向。

貝塞爾曲線

二次貝塞爾曲線

  • quadraticCurveTo(cp1x,cp1y,x,y)
    cp1x,cp1y 表示一個(gè)控制點(diǎn)坐標(biāo);x,y代表終點(diǎn)坐標(biāo)。

三次貝塞爾曲線

  • bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
    cp1x,cp1y和cp2x,cp2y分別代表
    兩個(gè)控制點(diǎn)。

實(shí)例1：繪制一個(gè)五角星 

window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d');
    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();
}

2.png

實(shí)例2:繪制寶馬標(biāo)志 

window.onload = function() { var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 800; var context = canvas.getContext('2d'); //圓心坐標(biāo)x,y  內(nèi)圓半徑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();
}

bm.png

2.CSS3 陰影 box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow 必需。水平陰影的位置。允許負(fù)值。
  • v-shadow 必需。垂直陰影的位置。允許負(fù)值。
  • blur 可選。模糊距離。
  • spread 可選。陰影的尺寸。
  • color 可選。陰影的顏色。請(qǐng)參閱 CSS 顏色值。
  • inset 可選。將外部陰影 (outset) 改為內(nèi)部陰影。

3.CSS3 transform屬性

transform: none|transform-functions;

  • transform:rotate()： 旋轉(zhuǎn),deg是度的意思 

    transform: rotate(-10deg);

  • transform:skew()： 傾斜 

    transform:skew(20deg);

  • transform:scale()： 縮放,x方向2倍，y方向1.5倍 

    transform: scale(2, 1.5);

  • transform:translate()： 平移,x方向平移120px，y方向平移10px 

    transform:translate(120px,10px);

4.CSS3 transtion屬性

transition: property duration timing-function delay;

  • transition-property 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。
  • transition-duration 規(guī)定完成過渡效果需要多少秒或毫秒。
  • transition-timing-function 規(guī)定速度效果的速度曲線。
  • transition-delay 定義過渡效果何時(shí)開始。 
div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }

文／BingCool852（簡書作者）


掃碼二維碼 獲取免費(fèi)視頻學(xué)習(xí)資料

Python編程學(xué)習(xí)

查 看2022高級(jí)編程視頻教程免費(fèi)獲取