1.canvas繪制
步驟
- 添加canvas元素，定義id和范圍
- js里獲取canvas元素
- 通過(guò)getContext()方法獲取2D繪制環(huán)境
- 通過(guò)不同的函數(shù)進(jìn)行圖形繪制
坐標(biāo)定位
- 繪制的圖形定位都是以canvas的左上角為(0,0)原點(diǎn)
繪制直線(xiàn)
- moveTo(): 規(guī)定起始點(diǎn)
- lineTo(): 從起點(diǎn)繪制到規(guī)定坐標(biāo)的直線(xiàn)
- stroke(): 實(shí)現(xiàn)繪制直線(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():開(kāi)始繪制路線(xiàn)
- arc(x,y,radius,startAngle,endAngle,anticlockwise)
設(shè)置繪制的中心點(diǎn)，半徑，起始角度，結(jié)束角度和繪制方向。
貝塞爾曲線(xiàn)
二次貝塞爾曲線(xiàn)
- quadraticCurveTo(cp1x,cp1y,x,y)
cp1x,cp1y 表示一個(gè)控制點(diǎn)坐標(biāo);x,y代表終點(diǎn)坐標(biāo)。
三次貝塞爾曲線(xiàn)
- 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è)置過(guò)渡效果的 CSS 屬性的名稱(chēng)。
- transition-duration 規(guī)定完成過(guò)渡效果需要多少秒或毫秒。
- transition-timing-function 規(guī)定速度效果的速度曲線(xiàn)。
- transition-delay 定義過(guò)渡效果何時(shí)開(kāi)始。
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
