canvas 畫布畫太極圖和鐘錶
阿新 • • 發佈：2018-12-12
摘要：html5的canvas元素稱得上是html5的核心技術，而作為一個依靠js繪製華麗影象的元素，Canvas究竟能夠運用在哪些方面的開發？
什麼是Canvas？
Canvas元素是h5的一部分，允許指令碼語言動態渲染影象。canvas由一個可繪製地區html程式碼中的屬性定義決定高度和寬度。js程式碼可以訪問該地區，通過一套完整的繪圖功能類似於其他通用二維的APU，從而生成動態的圖形
我們能用Canvas做什麼
1、遊戲
毫無疑問，遊戲在h5領域具有舉足輕重的地位。h5在基於web的影象顯示方面比flash更加立體、更加精巧
2、圖表
圖表製作時常被人們忽略，但無論企業內部還是企業間交流合作都離不開圖表。現在一些開發者使用HTML/CSS完成圖示製作，但大家完全可以用Canvas來實現。當然，使用SVG（可縮放向量圖形）來完成圖表製作也是非常好的方法。
小栗子：
畫圖形
<!DOCTYPE html > < html > < head > < meta charset= "utf-8" /> < meta http-equiv= "X-UA-Compatible" content= "IE=edge" > < title >繪製圖形 </ title< h2 >canvas元素使用示例-太極圖 </ h2 > < canvas id= "canvas0" width= "1000" height= "700" ></ canvas > < h2 >canvas元素使用示例-鐘錶 </ h2 > < canvas id= "canvas1" width= "400" height= "300" ></ canvas > < h2 >canvas元素使用示例-拆線圖 </ h2 > < canvas id= "canvas2" width= "450" height= "360" ></ canvas > </ body > </ html > <!--
canvasCase.js檔案
// 畫太極圖 function draw0( id){ var canvas = document. getElementById(id); if(canvas == null){ return false; } canvas. width = 1000; canvas. height = 500; var context = canvas. getContext( '2d');context. arc( 300, 300, 200, 0, Math.PI* 2); context. fillStyle = '#000'; context. fill(); context. strokeStyle = '#ccc'; context. stroke();
// 畫另一個大圓 // 重置 context. beginPath(); context. arc( 300, 300, 200, 1.5 * Math.PI, 0.5 * Math.PI); context. fillStyle = '#fff'; context. fill(); context. stroke();
// 畫另一個圓 // 重置 context. beginPath(); context. arc( 300, 200, 100, 0, 2 * Math.PI); context. fillStyle = '#000'; context. fill(); context. strokeStyle = '#000'; context. stroke();
// 畫另一個圓 // 重置 context. beginPath(); context. arc( 300, 400, 100, 0, 2 * Math.PI); context. fillStyle = '#fff'; context. fill(); context. strokeStyle = '#fff'; context. stroke();
// 畫另一個圓 // 重置 context. beginPath(); context. arc( 300, 200, 50, 0, 2 * Math.PI); context. fillStyle = '#fff'; context. fill(); context. strokeStyle = '#fff'; context. stroke();
// 畫另一個圓 // 重置 context. beginPath(); context. arc( 300, 400, 50, 0, 2 * Math.PI); context. fillStyle = '#000'; context. fill(); context. strokeStyle = '#000'; context. stroke(); }
// 畫鐘錶 var canvas1 = "", context1 = ""; function draw1( id = 'canvas1'){ var canvas1 = document. getElementById(id); if(canvas1 == null){ return false; } canvas1. width = 1000; canvas1. height = 500;
var context1 = canvas1. getContext( '2d'); var x = 210, y = 210, r = 200, date = new Date(), hours = date. getHours(), minutes = date. getMinutes(), seconds = date. getSeconds(); var h = (- 90 + hours* 30 + (minutes / 2)) * Math.PI / 180, m = (- 90 + minutes* 6 + (seconds / 10)) * Math.PI / 180, s = (- 90 + seconds* 6) * Math.PI / 180; context1. beginPath(); context1. arc(x, y, r, 0, 360 * Math.PI / 180); context1. fillStyle = '#fff'; context1. fill(); context1. strokeStyle = '#ccc'; context1. stroke(); context1. closePath();
// 分針 context1. beginPath(); for( var i = 0; i < 60; i ++){ context1. moveTo(x, y); context1. arc( x, y, r, i * 6 * Math.PI/ 180, (i + 1)* 6 * Math.PI/ 180); } context1. fillStyle = "#000"; context1. stroke(); context1. beginPath(); context1. arc(x, y, r*( 18/ 20), 0, 2 * Math.PI); context1. fillStyle = '#fff'; context1. fill(); context1. strokeStyle = "#fff"; context1. stroke(); //context.closePath();
// 時針 context1. beginPath(); for( var i = 0; i < 12; i ++){ context1. moveTo(x, y); context1. arc( x, y, r, i * 30 * Math.PI/ 180, (i + 1)* 30 * Math.PI/ 180); } context1. lineWidth = 3; context1. strokeStyle = "#000"; context1. stroke(); context1. beginPath(); context1. arc(x, y, r*( 16/ 20), 0, 2 * Math.PI); context1. fillStyle = '#fff'; context1. fill(); context1. strokeStyle = "#fff"; context1. stroke();
// 畫時分秒線 // 時 context1. beginPath(); context1. moveTo(x, y); context1. arc(x, y, r*( 10/ 20), h, h); context1. lineWidth = 5; context1. strokeStyle = '#000'; context1. stroke(); // 分 context1. beginPath(); context1. moveTo(x, y); context1. arc(x, y, r*( 12/ 20), m, m); context1. lineWidth = 3; context1. strokeStyle = '#000'; context1. stroke(); // 秒 context1. beginPath(); context1. moveTo(x, y); context1. arc(x, y, r*( 14/ 20), s, s); context1. lineWidth = 1; context1. strokeStyle = '#000'; context1. stroke(); } draw1(); setInterval(draw1, 1000);