HTML5-canvas標籤結合簡單例項講解
阿新 • • 發佈：2018-12-23
關於Canvas的簡單介紹
<canvas>元素是HTML5中的新元素，該標籤只是圖形容器，需要使用指令碼語言來繪製圖形。瀏覽器支援
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支援 元素.
注意: Internet Explorer 8 及更早 IE 版本的瀏覽器不支援 <canvas> 元素.建立一個簡單的畫布
【原始碼】
<!DOCTYPE html> <html> <head> <title>canvas</title> <meta charset="utf-8"> <style type="text/css"> .ca{ border:1px solid #008B8B; } </style> </head> <body> <canvas id="myCanvas-color" width="250" height="150" class="ca"> <!-- id屬性比寫且唯一； width和height不寫也可以顯示，如果對其有要求是要寫的； canvas預設沒有邊框樣式，需要設定才能看見邊框範圍， 通過實踐發現它不是塊級元素，因為它不獨佔一行。 --> </canvas> <script type="text/javascript"> var cvsc = document.getElementById("myCanvas-color"); //獲取畫布id為myCanvasvar var ctxc = cvsc.getContext('2d');//獲取繪圖2D環境 ctxc.fillStyle = "#008B8B";//不寫這句，會預設顯示黑色 ctxc.fillRect(20,20,200,100);//必須有，fillRect(x,y,width,height)方法定義了矩形當前的填充方式 //其中x表示“矩形x座標”； //y表示“矩形y座標”； //width為矩形的寬； //height為矩形的高； </script> </body> </html>
【效果圖】
【知識點】
fillStyle 屬性設定或返回用於填充繪畫的顏色、漸變或圖案。
| 值 | 描述 |
|---|---|
| color | 指示繪圖填充色的 CSS 顏色值。預設值是 #000000。 |
| gradient | 用於填充繪圖的漸變物件（線性或 放射性）。 |
| pattern |
Canvas - 漸變
下面是線性漸變簡單例項【原始碼】
<!DOCTYPE html> <html> <head> <title>canvas</title> <meta charset="utf-8"> <style type="text/css"> .ca{ border:1px solid #008B8B; } </style> </head> <body> <canvas id="myCanvas-grandient" width="250" height="150" class="ca"></canvas> <script type="text/javascript"> var cvsg = document.getElementById("myCanvas-grandient"); var ctxg = cvsg.getContext("2d"); var grd = ctxg.createLinearGradient(0,0,0,130); //JavaScript語法context.createLinearGradient(x0,y0,x1,y1); //其中x0表示“漸變開始點的x座標”； //y0表示“漸變開始點的 y 座標”； //x1表示“漸變結束點的 x 座標”； //y1表示“漸變結束點的 y 座標”； //補充：當其他值為0，x1大於0時為從左向右漸變； //當其他值為0，y1大於0時為從上到下漸變； grd.addColorStop(0,"#008B8B"); grd.addColorStop(0.2,"#458B74"); grd.addColorStop(0.4,"#458B74"); grd.addColorStop(0.6,"#00EE76"); grd.addColorStop(0.8,"#FFD700"); grd.addColorStop(1,"#CD9B1D"); ctxg.fillStyle=grd; ctxg.fillRect(20,20,200,120); </script> </body> </html>
【效果圖】
【知識點】
createLinearGradient() 方法建立線性的漸變物件。
漸變可用於填充矩形、圓形、線條、文字等等。
提示：請使用 addColorStop() 方法規定不同的顏色，以及在 gradient 物件中的何處定位顏色。
使用格式：addColorStop(0~1,color);
下面是放射性漸變簡單例項
【原始碼】
<!DOCTYPE html> <html> <head> <title>canvas</title> <meta charset="utf-8"> <style type="text/css"> .ca{ border:1px solid #008B8B; } </style> </head> <body> <canvas id="myCanvas-radial" width="250" height="150" class="ca"></canvas> <script type="text/javascript"> var cvsr = document.getElementById("myCanvas-radial"); var ctxr = cvsr.getContext("2d"); var grd = ctxr.createRadialGradient(75,50,5,90,60,100); //JavaScript語法context.createRadialGradient(x0,y0,r0,x1,y1,r1); //其中x0表示“漸變的開始圓的 x 座標”； //y0表示“漸變的開始圓的 y 座標”； //r0表示“開始圓的半徑”； //x1表示“漸變的結束圓的 x 座標”； //y1表示“漸變的結束圓的 y 座標”； //r1表示“結束圓的半徑”； grd.addColorStop(0,"#008B8B"); grd.addColorStop(0.2,"#458B74"); grd.addColorStop(0.4,"#458B74"); grd.addColorStop(0.6,"#00EE76"); grd.addColorStop(0.8,"#FFD700"); grd.addColorStop(1,"#CD9B1D"); ctxr.fillStyle=grd; ctxr.fillRect(20,20,200,120); </script> </body> </html>
【效果圖】
Canvas - 繪製圖形簡單例項
【原始碼】<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<style type="text/css">
.ca{
border:1px solid #008B8B;
}
</style>
</head>
<body>
<canvas id="myCanvas-line" width="150" height="150" class="ca"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas-line");
var ctxl = cvs.getContext("2d");
ctxl.moveTo(20,20); //moveTo(x,y) 定義線條開始座標;
ctxl.lineTo(20,100); //lineTo(x,y) 定義線條結束座標;
ctxl.lineTo(100,100);
ctxl.lineTo(100,20);
ctxl.lineTo(20,20);
ctxl.stroke(); //使用 stroke() 方法來繪製線條:
</script>
</body>
</html>【效果圖】
如果你看懂了試著思考一下下面的圖形怎麼繪製吧~大膽嘗試
Canvas - 圖案
【原始碼】
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<style type="text/css">
.ca{
border:1px solid #008B8B;
}
</style>
</head>
<body>
<canvas id="myCanvas-pattern" width="370" height="350" class="ca"></canvas>
<img src="../images/a1.jpg" id="lamp" width="50" height="50">
<script type="text/javascript">
var cvsp = document.getElementById("myCanvas-pattern");
var ctxp = cvsp.getContext("2d");
var img = document.getElementById("lamp");
//方法一開始：
var pat = ctxP.createPattern(img,"no-repeat");//可以設定圖片重複方式
ctxP.rect(0,0,150,100);
ctxP.fillStyle=pat;
ctxP.fill();
//方法一結束；
//如果方法一沒有顯示出效果，將方法一部分內容註釋掉，嘗試方法二：
// img.onload = function(){
// ctxp.drawImage(img,10,10);
// }
</script>
</body>
</html>【效果圖】
Canvas - 文字
【原始碼】<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<style type="text/css">
.ca{
border:1px solid #008B8B;
}
</style>
</head>
<body>
<canvas id="myCanvas-text" width="250" height="150" class="ca"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("myCanvas-text");
var ctext = cvs.getContext("2d");
ctext.font = "30px Arial";
ctext.strokeText("我真帥!",20,100);
//fillText定義實心的文字；
//JavaScript語法：stroke(text,x,y)；
//其中text為顯示文字；x表示“文字的x座標”；
//y表示“文字的y座標”；
</script>
</body>
</html>【效果圖】
Canvas - 漸變色文字
【原始碼】<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<style type="text/css">
.ca{
border:1px solid #008B8B;
}
</style>
</head>
<body>
<canvas id="myCanvasText" width="260" height="150" class="ca"></canvas>
<script type="text/javascript">
var cvsT = document.getElementById("myCanvasText");
var ctxT = cvsT.getContext("2d");
var grd = ctxT.createLinearGradient(0,0,cvsT.width,0);
grd.addColorStop(0,"#cb1310");
grd.addColorStop(0.2,"#cb3b10");
grd.addColorStop(0.4,"#cb7b10");
grd.addColorStop(0.6,"#cbaa10");
grd.addColorStop(0.8,"#c7cb10");
grd.addColorStop(1,"#72cb10");
ctxT.font = "50px myFirstFont";
ctxT.fillStyle=grd;
ctxT.fillText("JavaScript",10,110);
</script>
</body>
</html>【效果圖】
更多內容詳情請檢視連結點選開啟連結