1. Canvas繪製基礎圖形
阿新 • • 發佈：2018-12-19
Canvas是在web畫面中繪製點陣圖的技術。
步驟：
1.取得Canvas物件。（相當於畫布）
2.從Canvas物件中獲取繪圖用的上下文。（相當於繪畫用的筆）
3.使用上下文中的方法和屬性進行繪圖。
1.簡單例子：
<style type="text/css"> canvas { width: 300px; height: 300px; } </style> </head> <body> <canvas id="cas"></canvas> <script type="text/javascript"> var canvas = document.getElementById("cas"); //2d指繪製的是二維圖形，3d指繪製三維圖形 var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(255, 0, 0)"; //設定填充顏色 ctx.fillRect(50, 50, 200, 200); //繪製矩形 </script> </body>
效果圖：
屬性知識：
1.顏色的指定方法通常有三種：
ctx.fillStyle = "#ff0000";
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillStyle = "rgba(255,0,0,0.5)";2.座標的指定方法：
以左上角為原點，向右和向下為正方向，單位是畫素。
3.路徑:所謂路徑就是通常所說的“一筆繪圖”的形式，在canvas中，通過多次重複路徑繪製更復雜的圖形。
（1）.下面是繪製簡單三角形的步驟：
- 取得Canvas繪圖的上下文；
- 呼叫beginPath()方法宣佈路徑繪製的開始；
- 使用moveTo(), lineTo()方法依次指定座標和繪製直線；
- 呼叫closePath()方法結束路徑；
- 呼叫fill()方法進行圖形繪製。
<style type="text/css"> canvas { width: 300px; height: 300px; } </style> </head> <body> <canvas id="cas"></canvas> <script type="text/javascript"> //取得canvas物件和繪圖用的上下文 var canvas = document.getElementById("cas"); var ctx = canvas.getContext("2d"); //路徑繪製的開始 ctx.beginPath(); //路徑的繪製 ctx.moveTo(0,0); ctx.lineTo(0,290); ctx.lineTo(290,290); //路徑繪製結束 ctx.closePath(); //進行繪圖處理 ctx.fillStyle = "rgb(200,0,0)"; ctx.fill(); </script>
效果：
（2）.進行路徑繪製的各種辦法：
| 方法 | 功能 |
| beginPath() | 重置路徑的開始 |
| closePath() | 關閉到現在為止的路徑 |
| moveTo(x, y) | 指定繪圖開始時的基點(x, y) |
| lineTo(x, y) | 繪製從前一次繪圖位置到(x, y)的直線 |
| 方法 | 功能 |
| stroke() | 繪製路徑 |
| fill() | 填充路徑 |
| 屬性 | 功能 |
| fillStyle | 指定填充時使用的顏色和樣式 |
| strokeStyle | 指定路徑的線顏色和樣式 |
| lineWidth | 制定路徑線的粗細 |
下面是一個點選繪製三角形的程式：
<style type="text/css">
canvas {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<canvas id="cas"></canvas>
<script type="text/javascript">
//取得canvas物件和繪圖用的上下文
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
//設定canvas的onmouse事件
canvas.onmousedown = function(event){
//取得觸控處的座標
var x = event.x;
var y = event.y;
var r = Math.random()*10 + 5;
//路徑指定
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y+r);
ctx.lineTo(x+r, y+r);
ctx.lineTo(x, y);
//繪圖
ctx.strokeStyle = "red";
ctx.stroke();
};
</script>效果：
4.繪製方法介紹：
- arc()方法：可以繪製圓和圓弧。
注意：Math.PI()表示π，弧度 = 角度*π/180
語法：context.arc(x,y,半徑，開始弧度，結束弧度，是否逆時針旋轉);
- 繪製圓弧
<canvas id="cas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
var startAngle = 0;
var endAngle = 1.2*Math.PI;
ctx.beginPath();
ctx.arc(150, 75, 50, startAngle, endAngle, true);
ctx.strokeStyle = "#f00";
ctx.stroke();
</script>注意：開始總把圓畫成橢圓，後來查過以後發現最好把canvas寬高設定在行內，而且別寫單位。
效果：
- 繪製圓
<canvas id="cas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.fillStyle = "yellow";
ctx.fill();
</script>效果圖：
2.arcTo()方法：此方法是建立介於兩個切線之間的弧/曲線。
語法：context.arcTo(x1,y1,x2,y2,半徑);
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="cas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
//繪製路徑
ctx.beginPath();
//開始點
ctx.moveTo(20,20);
//第一條線
ctx.lineTo(200,20);
//建立弧
ctx.arcTo(250,20,250,70,50);
//第二條線
ctx.lineTo(250,280);
ctx.strokeStyle = "green";
ctx.lineWidth = 3;
ctx.stroke();
</script>效果圖：
3.quadraticCurveTo()和bezierCurveTo()方法
涉及到貝塞爾曲線，使用時查文件：
4.rect()方法：用於繪製矩形。
語法：context.rect(x,y,寬度，高度)
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="cas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
ctx.rect(20,20,200,200);
ctx.fillStyle = "green";
ctx.strokeStyle = "red";
ctx.lineWidth = 4;
ctx.fill();
ctx.stroke();
</script>效果：
canvas還提供三種特定的巨型繪製方法：
| 方法 | 功能說明 |
| context.strokeRect(x,y,w,h) | 繪製矩形的輪廓 |
| context.fillRect(x,y,w,h) | 填充矩形 |
| context.clearRect(x,y,w,h) | 清空矩形 |
<canvas id="cas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
//注意：顏色放在繪製的前面，否則是黑色的
//用紅色繪製矩形輪廓
ctx.strokeStyle = "red";
ctx.lineWidth = 4;
ctx.strokeRect(20,20,200,200);
//用綠色來填充矩形
ctx.fillStyle = "green";
ctx.fillRect(20,20,200,200);
//中間挖空一個矩形
ctx.clearRect(50,50,100,50);
ctx.stroke();
ctx.fill();
</script>效果圖：
