Html5 Canvas開發之插入圖片、設定背景、漸變、文字、陰影
阿新 • • 發佈：2019-02-14
1.插入圖片
等圖片載入完，再執行canvas操作
-圖片預載入：在onload中呼叫
drawImage(olmg,x,y,w,h)
-olmg:當前圖片x,y：座標w,h：寬高
簡單例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style> body{ background:black;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC =document.getElementById('c1'); var oGC = oC.getContext('2d'); var yImg = new Image(); yImg.onload = function(){ draw(this); }; yImg.src = '2.png'; function draw(obj){ oGC.drawImage(obj,0,0); } }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
複雜例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style> body{ background:black;} #c1{ background:white;} </style> <script> window.onload = function(){ var aInput = document.getElementsByTagName('input'); var oImg = document.getElementById('img1'); var yImg = new Image(); var iNow = 0; yImg.onload = function(){ draw(oImg); }; yImg.src = oImg.src; function draw(obj){ var oC = document.createElement('canvas'); var oGC = oC.getContext('2d'); oC.width = obj.width; oC.height = obj.height; obj.parentNode.replaceChild(oC,obj); oGC.drawImage(obj,0,0); aInput[1].onclick = function(){ if(iNow==3){ iNow = 0; } else{ iNow++; } toChange(); }; aInput[0].onclick = function(){ if(iNow==0){ iNow = 3; } else{ iNow--; } toChange(); }; function toChange(){ switch(iNow){ case 1: oC.width = obj.height; oC.height = obj.width; oGC.rotate(90*Math.PI/180); oGC.drawImage(obj,0,-obj.height); break; case 2: oC.width = obj.width; oC.height = obj.height; oGC.rotate(180*Math.PI/180); oGC.drawImage(obj,-obj.width,-obj.height); break; case 3: oC.width = obj.height; oC.height = obj.width; oGC.rotate(270*Math.PI/180); oGC.drawImage(obj,-obj.width,0); break; case 0: oC.width = obj.width; oC.height = obj.height; oGC.rotate(0); oGC.drawImage(obj,0,0); break; } } } }; </script> </head> <body> <input type="button" value="←" /> <input type="button" value="→" /> <div> <img src="2.png" id="img1" /> </div> </body> </html>
設定背景：
createPattern(olmg,平鋪方式)
-平鋪引數為：repeat、repeat-x、repeat-y、no-repeat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style> body{ background:black;} #c1{ background:white;} </style> <script> window.onload = function(){ var oC =document.getElementById('c1'); var oGC = oC.getContext('2d'); var yImg = new Image(); yImg.onload = function(){ draw(this); }; yImg.src = '2.png'; function draw(obj){ var bg = oGC.createPattern(obj,'repeat'); oGC.fillStyle = bg; oGC.fillRect(0,0,300,300); } }; </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
3.漸變
createLinearGradient(x1,y1,x2,y2)
-線性漸變：
-第一組引數：起始點座標、第二組引數：結束點座標
-addColorStop(位置、顏色)新增漸變點
createRadialGradient(x1,y1,r1,x2,y2,r2)
-放射性漸變：
-引數：第一個圓的座標和半徑，第二個圓的座標和半徑
線性漸變
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
var obj = oGC.createLinearGradient(150,100,250,200);
obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue');
oGC.fillStyle = obj;
oGC.fillRect(150,100,100,100);
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>放射性漸變：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
var obj = oGC.createRadialGradient(200,200,100,200,200,150);
obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue');
oGC.fillStyle = obj;
oGC.fillRect(0,0,oC.width,oC.height);
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>stokeText(文字,x,y)
-文字邊框
fillText(文字,x,y)
-文字填充
font
-文字大小：‘60px impact’
textAlign
-預設是start跟left一樣的效果 end right center
textBaseline
-文字上下的位置的方式預設：alphabetic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.font = '60px impact';
oGC.textBaseline = 'top'; //middle bottom
oGC.fillText('妙味課堂',0,0);
oGC.strokeText('妙味課堂',0,200);
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
-measureText(str).width:只有寬度，沒有高度
例：文字居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.font = '60px impact';
oGC.textBaseline = 'top'; //middle bottom
var w = oGC.measureText('妙味課堂').width;
oGC.fillText('妙味課堂',(oC.width - w)/2,(oC.height - 60)/2);
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>5.陰影
shadowOffsetX、shadowOffsetY
-x軸偏移、y軸偏移
shadowBlur
-高斯模糊值
shadowColor
-陰影顏色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script>
window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.font = '60px impact';
oGC.textBaseline = 'top'; //middle bottom
oGC.shadowOffsetX = 10;
oGC.shadowOffsetY = 10;
oGC.shadowBlur = 3;
//alert(oGC.shadowColor); //預設顏色：黑色透明
oGC.shadowColor = 'yellow';
var w = oGC.measureText('妙味課堂').width;
oGC.fillText('妙味課堂',(oC.width - w)/2,(oC.height - 60)/2);
};
</script>
</head>
<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>