學(xué)習(xí)canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="drawing" width="400" height="400"></canvas>
</body>
<script>
// 獲取繪圖上下文
var drawing = document.getElementById('drawing');
// 填充和描邊
var context = drawing.getContext('2d')
// 描邊
// context.strokeStyle = 'red';
// 填充
// context.fillStyle='#0000ff';
///////////// 繪制矩形
// fillRect() strokeRect() clearRect() 與矩形有關(guān)的方法
/* * 四個(gè)參數(shù)
* 矩形的 x 坐標(biāo)
* 矩形的 y 坐標(biāo)
* 矩形的寬度
* 矩形的高度
*/
////// fillRect() 在畫布上繪制的矩形會(huì)填充 fillStyle 指定的顏色
// 繪制紅色矩形
// context.fillStyle='#ff0000';
// context.fillRect(10,10,50,50);
// 繪制半透明的藍(lán)色矩形
// context.fillStyle = 'rgba(0,0,255,0.5)'
// context.fillRect(30,30,50,50)
/////// stokeRect() 在畫布上繪制的矩形會(huì)使用 strokeStyle 指定的顏色
// 繪制紅色描邊矩形
// context.strokeStyle='#ff0000';
// context.strokeRect(10, 10, 50, 50);
// 繪制半透明邊框的藍(lán)色矩形
// context.strokeStyle = 'rgba(0,0,255,0.5)'
// context.strokeRect(30,30,50,50)
////// clearRect() 用于清除畫布上的矩形區(qū)域
// 繪制紅色矩形
// context.fillStyle='#ff0000';
// context.fillRect(10,10,50,50);
// 繪制半透明的藍(lán)色矩形
// context.fillStyle = 'rgba(0,0,255,0.5)'
// context.fillRect(30,30,50,50)
// 重疊的地方清除一個(gè)小矩形
// context.clearRect(40, 40, 10, 10);
////// 繪制路徑
/*
* arc(x, y, 半徑, 開始角度, 結(jié)束角度, true逆時(shí)針 false順時(shí)針) (x, y)為圓心
* arcTo(x1, y1, x2 ,y2, 角度) 從上一點(diǎn)開始繪制一條弧線，到( x2, y2)為止，并且以給定的半徑穿過( x1, y1)
* bezierCurveto(c1x, c1y, c2x, c2y, x, y) 從上一點(diǎn)開始繪制一條曲線，到( x, y)為止，并且以(c1x, c1y)和( c2x, c2y)為控制點(diǎn)
* lineTo(x, y) 從上一點(diǎn)開始繪制一條直線，到(x, y)為止
* moveTo(x, y) 將繪圖點(diǎn)移到(x, y)
* quadraticCurveto(cx, cy, x, y) 從上一點(diǎn)開始繪制一條如此曲線，到(x, y)為止，并且以( cx, cy)為控制點(diǎn)
* rect(x, y, width, height) 從點(diǎn)(x, y)開始繪制一個(gè)矩形路徑，寬度和高度分別由width和height指定
*/
// 繪制外圓
// context.arc(100, 100, 99, 0, Math.PI * 2, false);
// 繪制內(nèi)圓
// context.arc(100, 100, 94, 0, Math.PI * 2, false);
// 繪制分針 繪圖點(diǎn)移到圓心的位置
// context.moveTo(100, 100);
// context.lineTo(100, 30);
// 繪制時(shí)針 繪圖點(diǎn)移到圓心的位置
// context.moveTo(100, 100);
// context.lineTo(45, 100);
// 繪制路徑 必須調(diào)用stroke 才可以畫出
// context.stroke();
/////////// 繪制文本
/*
* font 文本樣式 大小
* textAlign 文本對(duì)齊方式 start end left right center
* textBaseLine 文本的基線 top hanging middle alphabetic bottom
*/
// context.font='bold 14px sans-serif';
// context.textAlign='center';
// context.textBaseline='middle';
// 在（100，20）的位置繪制文本
// context.fillText('12', 100 , 20);
// context.textAlign='start';
// context.fillText('12', 100 , 40);
// context.textAlign='end';
// context.fillText('12', 100 , 60);
//////////////// 變換
/*
* rotate(角度) 圍繞遠(yuǎn)點(diǎn)旋轉(zhuǎn)圖像
* scale(scaleX, scaleY) x和y分別以多少倍進(jìn)行縮放
* translate(x, y) 將坐標(biāo)原點(diǎn)移動(dòng)到(x, y)
*/
// 上面畫圓的方法并未更改原點(diǎn) 更改原點(diǎn)之后繪制更加方便
context.translate(200, 200);
</script>
</html>
