Trip to Canvas(1)

昨天看到介绍svg和vml的文章，虽然我的js不咋地，我还是忍住不去找资料学习了一把，下面就简单帮自己总结下吧，也希望对自己和看到的朋友都有帮助。
先看一个简单的例子
<head> <script> window.onload = function(){ var canvas = document.getElementById("square"); var context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); canvas = document.getElementById("circle"); context = canvas.getContext("2d"); context.fillStyle = "#00f"; context.beginPath(); context.arc(5, 5, 5, 0, 2*Math.PI, true); context.fill(); } </script></head> <body> <canvas id="square" width="20px" height="20px"></canvas> <canvas id="circle" width="20px" height="20px"></canvas> </body>

部分方法说明：

CanvasRenderingContext2D Canvas.getContext(contextID)
使用返回值对象可以对canvas进行绘制

void CanvasRenderingContext2D.arc(float x,float y, float r,float startAngle, endangle, boolean counterclockwise)
使用第一二个参数为原点第三个参数为半径第四第五为开始结束角度按照最后个参数顺或逆时针绘制圆弧

void CanvasRenderingContext2D.beginPath()
丢弃当前定义的路径并开始一条心的路径

void CanvasRenderingContext2D.closePath()
如果画布当前路径是打开的就添加一条线条连接当前点和子路径起点来关闭

void CanvasRenderingContext2D.bezierCurveTo()
为当前路径添加一个三次贝塞尔曲线

void CanvasRenderingContext2D.clip()
使用当前路径作为连续绘制操作的剪切区域

void CanvasRenderingContext2D.fill()
使用fillStyle属性所指定的颜色渐变或模式来绘制当前路径的内部

......
好，基本明白了上面的内容后就可以对需求作进一步扩展了，现在的需求是画一个简单的饼图，如果需求简单，那么在前台完成时最好不过了，我不在需要下面这样的代码了：
```
 
```
如果数据源并非database，并且固定，只是一个时期的统计，那么拿前台来画图吧,代码如下
<script> var Canvas = {}; /* create a canvas element */ Canvas.createCanvas = function(id, width, height) { var canvas = document.createElement("canvas"); canvas.id = id; canvas.width = (!width) ? 200 : width; canvas.height = (!height) ? 200 : height; return canvas; }; /* draw a pie chart in canvas specified by element or id. */ Canvas.pieChart = function(canvas, data, cx, cy, r, colors, labels, lx, ly) { //if the given canvas is a id if (typeof canvas == "string") canvas = document.getElementById(canvas); //canvas's drawing context var g = canvas.getContext("2d"); //all the lines are 2-pixel-ide black lines g.lineWidth = 2; g.strokeStyle = "black"; var total = 0; for (var i = 0; i < data.length; i++) total += data[i]; //Compute the angle for each one var angles = []; for (var i = 0; i < data.length; i++) angles[i] = data[i] / total * Math.PI * 2; //loop through the wedges of the pie startangle = -Math.PI / 2; //this is at 12 o'clock, such as Math.PI / 2 = 6 o'clock, 0 = 3 o'clock etc. for (var i = 0; i < data.length; i++) { //This is the angle where the wedge ends var endangle = startangle + angles[i]; g.beginPath(); //start a new shape g.moveTo(cx, cy); //move to center g.arc(cx, cy, r, startangle, endangle, false); g.closePath(); g.fillStyle = colors[i]; g.fill(); g.stroke(); //The next wedge starts where this one ends startangle = endangle; //Draw the rectangle in the legend g.fillRect(lx, ly + 30 * i, 20, 20); g.strokeRect(lx, ly + 30 * i, 20, 20); var label = document.createElement("div"); label.style.position = "absolute"; label.style.left = (canvas.offsetLeft + lx + 30) + "px"; label.style.top = (canvas.offsetTop + ly + 30 * i - 4) + "px"; label.style.fontFamily = "sans-serif"; label.style.fontSize = "16px"; label.appendChild(document.createTextNode(labels[i])); document.body.appendChild(label); } }; </script><script type="text/javascript"> window.onload = function() { //create a canvas element var canvas = Canvas.createCanvas("canvas", 600, 400); //Add it to the document document.body.appendChild(canvas); //Draw a pie chart in it Canvas.pieChart("canvas", [12, 23, 34, 45], 200, 200, 150, ["red", "blue", "gray", "green"], ["North People", "Smallにほんじん", "American", "Chinese"], 400, 100); } </script>

应该没什么不合适的吧，虽然我自己也没有实际项目应用过 body {padding:0;margin:0;}
上面的例子都只在firefox等下有效，IE并不支持，但是没关系，可以从这里找到对IE的支持, 并且提供了一些十分不错的例子

posted on 2009-10-13 17:49 eEhdsa 阅读(589) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

eEhdsa

Trip to Canvas(1)

导航

公告