-
canvas基礎定義
查看全部 -
動畫查看全部
-
arc查看全部
-
line2查看全部
-
line查看全部
-
html5 canvas方法查看全部
-
小圓圓心計算方法
查看全部 -
點陣繪制方法
查看全部 -
數字中，小圓點位置分析
查看全部 -
## 基礎知識
通過`<canvas></canvas>`即可創建一個canvas。
```html
<canvas id="canvas" ></canvas>
<canvas id="canvas" width="1024" height="768"></canvas>
```
不建議直接使用css的方式指定大小。css指定的是顯示的大小，通過height和width指定的是顯示的大小以及分辨率的大小。
JavaScript中指定canvas寬高。
```js
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
```
canvas 繪圖主要通過 canvas.getContext 的獲得的上下文的 api 實現。
```js
var context = canvas.getContext('2d'); // 獲得繪圖上下文環境
```
**canvas坐標軸** ：左上角為原點，向右為x軸，向下為y軸。
canvas 是基于狀態的繪圖。
```js
context.beginPath();
context.moveTo(100, 100);
context.lineTo(700, 700);
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();
context.fillStyle = 'rgb(233, 233, 233)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#123456';
context.stroke();
context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
context.strokeStyle = 'black';
context.stroke();
```
`moveTo(x,y)` 畫筆移到(x,y)。
`lineTo(x,y)` 從當前點（默認為原點）到(x,y)畫一條。
`stroke()` 把當前的線條狀態繪制出來，**但并不會清空當前狀態（也就是說下一次調用stroke之前繪制的會再次被繪制）。**
`fill()` 繪制填充顏色塊。
`beginPath()` 開始一段新的路徑，也就是說，此后再次調用stroke()的時候，將從beginPath()之后開始。
`closePath()` 結束一段路徑。
`context.lineWidth, context.strokeStyle` 設置繪制線條寬度和樣式。
`context.fillStyle` 設置填充樣式。
#### 畫一個七巧板
```html
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? ? <canvas id="canvas" width="1024" height="768" >
? ? </canvas>
? ? <script>
? ? ? ? var tangram = [
? ? ? ? ? ? {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"green"},
? ? ? ? ? ? {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"red"},
? ? ? ? ? ? {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"yellow"},
? ? ? ? ? ? {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"blue"},
? ? ? ? ? ? {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"pink"},
? ? ? ? ? ? {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"black"},
? ? ? ? ? ? {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"gray"}
? ? ? ? ];
? ? ? ? window.onload = function() {
? ? ? ? ? ? var canvas = document.getElementById('canvas');
? ? ? ? ? ? var context = canvas.getContext('2d');
? ? ? ? ? ? for (var i = 0; i < tangram.length; i++) {
? ? ? ? ? ? ? ? draw(tangram[i], context);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function draw(piece, ctx) {
? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ctx.moveTo(piece.p[0].x, piece.p[0].y);
? ? ? ? ? ? for (var i = 1; i < piece.p.length; i++) {
? ? ? ? ? ? ? ? ctx.lineTo(piece.p[i].x, piece.p[i].y);
? ? ? ? ? ? }
? ? ? ? ? ? ctx.closePath();
? ? ? ? ? ? ctx.fillStyle = piece.color;
? ? ? ? ? ? ctx.fill();
? ? ? ? }
? ? </script>
</body>
</html>
```
查看全部 -
倒計時基本框架
查看全部 -
context.arc(50+i*100,420,40,0,2*Math.PI*（i+1）/10，true)
context.arc{
centerx(圓心橫坐標)centery(圓心縱坐標)radius（半徑）
startingAngle（弧線起始），endingAngle（弧線終止）
anticlockwise=false(可選值，定義圓形順逆方向)
}查看全部 -
context.move/lineTo(x,y)
context.begin/closePath()
七色板 fill-strokeStyle()
查看全部 -
canvas:
html:canvas id="canvas"?
js:
var canvas=document.getElementsById("canvas")
var context=canvas.getContext("2d")
canvas不用css編輯wh（指定canvas里圖片的精度）
查看全部 -
canvas結構與獲取方法
查看全部
舉報