簡(jiǎn)單了解canvas
1.什么是canvas
HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像维咸。
畫(huà)布是一個(gè)矩形區(qū)域，您可以控制其每一像素周荐。
canvas 擁有多種繪制路徑垄分、矩形、圓形芹务、字符以及添加圖像的方法。
版本支持：IE9以上
如果實(shí)在需要在IE9以前使用鸭廷，可以查看 Exprorer Canvas Project和其他類似項(xiàng)目枣抱，通過(guò)插件來(lái)實(shí)現(xiàn)
瀏覽器兼容
注：canvas不是矢量圖
2.canvas的作用
一些可能的用途，包括使用Canvas構(gòu)造圖形辆床，動(dòng)畫(huà)佳晶，游戲和圖片
當(dāng)然也包括熱工藝圖。
3.我們?yōu)槭裁匆褂胏anvas
性能讼载，酷炫轿秧，還有什么好說(shuō)的
1.只用一個(gè) Canvas DOM 元素，降低 DOM 數(shù)量與渲染的復(fù)雜度咨堤，可以將原來(lái) CPU 密集型變成 GPU 操作菇篡。
2.充分利用硬件資源的能力。
3.Canvas畫(huà)布無(wú)論是 JavaScript & H5一喘，還是native都有類似的 API驱还。因此我可以把瀏覽器Canvas接口的反射到用native畫(huà)布上，以此提高性能凸克。
canvas初識(shí)
1.在web頁(yè)面增加畫(huà)布
在html頁(yè)面中增加
<canvas id="hehe" width="600" height="200"></canvas>
注意：canvas寬高可以通過(guò)css設(shè)置议蟆，但是不建議，因?yàn)槿绻霸O(shè)置了標(biāo)簽樣式萎战，再設(shè)置css樣式會(huì)把canvas圖像扯變形
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
background:#000;
width:400px;
height:300px;
}
</style>
</head>
<body>
<canvas id="hehe" width="300" height='300'></canvas>
</body>
<script>
let canvas = document.getElementById("hehe"),
ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
</script>
</html>
扯變形
2.如何看到畫(huà)
除非你在畫(huà)布上設(shè)置了內(nèi)容咐容，否則你是看不見(jiàn)它的，會(huì)默認(rèn)為透明色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
background:#000
}
</style>
</head>
<body>
<canvas id="hehe" width="200" height='300'></canvas>
</body>
</html>
3.在畫(huà)布上繪圖
將畫(huà)布放置在x=10,y=10的位置建立一個(gè)寬高100的矩形
Paste_Image.png
4.一個(gè)小小的畫(huà)布測(cè)試
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
border:1px solid #000
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('hehe');
//開(kāi)始在畫(huà)布繪制之前蚂维，我們必須遵循這個(gè)協(xié)議
var context = canvas.getContext('2d');//提供一個(gè)可繪制的上下文
context.fillStyle = 'blue';//默認(rèn)填充色為黑色戳粒，改變默認(rèn)填充色
context.fillRect(10, 10, 100, 100); //x, y, 寬, 高
//如果只想要輪廓context.strokeRect(10, 10, 100, 100)
}
</script>
</head>
<body>
<canvas id="hehe" width="300" height:'300'></canvas>
</body>
</html>
我們打算畫(huà)一個(gè)隨機(jī)生成的圓餅
建立一個(gè)表單去控制canvas輸出的圖像
準(zhǔn)備工作
MDN canvas API
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
http://dev.w3.org/html5/2dcontext/
1.首先，建立HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
border:1px solid #000
}
</style>
<script></script>
</head>
<body>
<canvas id="hehe" width="300" height:'300'>
如果你的瀏覽器不支持canvas鸟雏，會(huì)不認(rèn)識(shí)canvas標(biāo)簽享郊，會(huì)直接識(shí)別canvas閉合標(biāo)簽內(nèi)的文本元素
</canvas>
<form>
</form>
</body>
</html>
2.然后增加form
<form>
<p>
<label for="backgroundColor">選擇背景顏色</laberl>
<select id="backgroundColor">
<option value="white" selected="selected">白色</option>
<option value="black">黑色</option>
</select>
</p>
<p>
<label for="shape">選擇形狀</laberl>
<select id="shape">
<option value="none" selected="selected">都不</option>
<option value="circles">圓</option>
<option value="squares">方塊</option>
</select>
</p>
<p>
<label for="foregroundColor">選擇文本顏色</laberl>
<select id="foregroundColor">
<option value="black" selected="selected">黑色</option>
<option value="white">白色</option>
</select>
</p>
<p>
<input type="button" id="previewButton" value="預(yù)覽">
</p>
</form>
3.用js做計(jì)算
創(chuàng)建一個(gè)hehe.js文件
window.onload = function() {
var button = document.getElementById('previewButton')
button.onclick = previewHandler;
}
function previewHandler() {
var canvas = document.getElementById('hehe');
var context = canvas.getContext('2d');
var selectObj = document.getElementById('shape');
var index = selectObj.selectedIndex;
var shape = selectObj[index].value;
if(shape === "squares"){
for(var squares = 0; squares < 20; squares++){
drawSquare(canvas, context)
}
}
}
4.編寫drawSquare函數(shù)
function drawSquare(canvas, context){
var w = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.fillStyle = 'lightblue'
context.fillRect(x, y, w, w)
}
5.試試效果
6.增加backgroundColor調(diào)用
function fillBackgroundColor(canvas, context){
var selectObj = document.getElementById('backgroundColor');
var index = selectObj.selectedIndex;
var bgColor = selectObj.options[index].value
context.fillStyle = bgColor;
context.fillRect(0, 0, canvas.width, canvas.height)
}
7.奇怪的繪制
畫(huà)一個(gè)簡(jiǎn)單的三角形
context.beginPath();//開(kāi)始
context.moveTo(100, 150);////第一次的moveTo指的是將畫(huà)筆落到指定的位置
context.lineTo(250,75)
context.lineTo(125,30)
context.closePath();//結(jié)束
context.stroke();//描繪
//context.fillStyle='red'
//context.fill();
8.分解arc
圓的方法:
context.arc(x, y, radius, startAngle, endAngle, direction)
x和y 參數(shù)是來(lái)確定圓心在畫(huà)布上的位置
radius用來(lái)指定圓的半徑
direction指定圓弧是逆時(shí)針還是順時(shí)針，布爾值孝鹊，true為逆時(shí)針炊琉，false為順時(shí)針
startAngle 和 endAngle 是圓弧的起始角和 終止角
注意：角可以按負(fù)方向（從X軸逆時(shí)針）度量，也可以按正方向（從X軸順時(shí)針）度量
9.淺嘗弧線的使用
context.beginPath();
context.arc(70,70,60,0, (270 * Math.PI)/180, true)
//等于context.arc(70,70,60,0, (-90 * Math.PI)/180, true)
context.stroke()
起始角X軸與弧線終點(diǎn)之間的角又活，由于我們的弧是一個(gè)90°的弧苔咪，所以終止角為270°（注意：如果是按照負(fù)值或者逆時(shí)針?lè)较騺?lái)度量，那么終止角就是-90°）
10.度與弧度
360度 = 2PI弧度
11.再來(lái)編寫圓代碼
if(shape === "circles"){
for(var circle = 0; circle < 20; circle++){
drawCircle(canvas, context)
}
}
12.編寫drawCircle函數(shù)
function drawCircle(canvas, context){
var radius = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.arc(x, y, radius, 0 , 2 * Math.PI, true);
context.fillStyle = 'lightblue'
context.fill();
context.stroke()
}
13.完成drawText函數(shù)
function drawText(canvas, context){
var selectObj = document.getElementById('foregroundColor');
var index = selectObj.selectedIndex;
var fgColor = selectObj[index].value;
context.fillStyle = fgColor;
context.font = 'bold 1em sans-serif'
context.textAligh = 'left'
context.fillText('在畫(huà)布上不知道寫什么...呵呵', 20, 40)
}
14.搞定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#hehe{
border:1px solid #000
}
</style>
<script>
window.onload = function() {
var button = document.getElementById('previewButton')
button.onclick = previewHandler;
}
function previewHandler() {
var canvas = document.getElementById('hehe');
var context = canvas.getContext('2d');
fillBackgroundColor(canvas, context);
drawText(canvas, context);
var selectObj = document.getElementById('shape');
var index = selectObj.selectedIndex;
var shape = selectObj[index].value;
if(shape === "squares"){
for(var squares = 0; squares < 20; squares++){
drawSquare(canvas, context)
}
}
if(shape === "circles"){
for(var circle = 0; circle < 20; circle++){
drawCircle(canvas, context)
}
}
}
function drawSquare(canvas, context){
var w = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.fillStyle = 'lightblue'
context.fillRect(x, y, w, w)
}
function fillBackgroundColor(canvas, context){
var selectObj = document.getElementById('backgroundColor');
var index = selectObj.selectedIndex;
var bgColor = selectObj.options[index].value
context.fillStyle = bgColor;
context.fillRect(0, 0, canvas.width, canvas.height)
}
function drawCircle(canvas, context){
var radius = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.arc(x, y, radius, 0 , 2 * Math.PI, true);
context.fillStyle = 'lightblue'
context.fill();
context.stroke()
}
function drawText(canvas, context){
var selectObj = document.getElementById('foregroundColor');
var index = selectObj.selectedIndex;
var fgColor = selectObj[index].value;
context.fillStyle = fgColor;
context.font = 'bold 1em sans-serif'
context.textAligh = 'left'
context.fillText('在畫(huà)布上不知道寫什么...呵呵', 20, 40)
}
</script>
</head>
<body>
<canvas id="hehe" width="300" height:'300'>
如果你的瀏覽器不支持canvas柳骄，會(huì)不認(rèn)識(shí)canvas標(biāo)簽团赏，會(huì)直接識(shí)別canvas閉合標(biāo)簽內(nèi)的文本元素
</canvas>
<form>
<p>
<label for="backgroundColor">選擇背景顏色</laberl>
<select id="backgroundColor">
<option value="white" selected="selected">白色</option>
<option value="black">黑色</option>
</select>
</p>
<p>
<label for="shape">選擇形狀</laberl>
<select id="shape">
<option value="none" selected="selected">都不</option>
<option value="circles">圓</option>
<option value="squares">方塊</option>
</select>
</p>
<p>
<label for="foregroundColor">選擇文本顏色</laberl>
<select id="foregroundColor">
<option value="black" selected="selected">黑色</option>
<option value="white">白色</option>
</select>
</p>
<p>
<input type="button" id="previewButton" value="預(yù)覽">
</p>
</form>
</body>
</html>