摘要：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> <meta name="viewport" content="width=device-width, initial-scale=1"> <style></style> <script type="text/javascript" src="canvasCase.js" charset="utf-8"></script></head><body onload=" draw0('canvas0'); draw1('canvas1'); ">
<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);
