canvas
- HTML如下：
<canvas id="myCanvas"></canvas>
js
var canvas=document.getElementById("myCanvs");
var context = canvas.getContext("2d");
- context对象的方法：
fillStyle=“#000”; //填充矩形颜色
fillText(text,x,y,maxwidth) //填充文字，maxwidth可选属性
fillRect(x, y, width,height); //绘制矩形
moveTo(x, y)； //线条开始的位置
lineTo(x,y); //定义线条结束的位置
stroke(); //绘制线条
canvas属性链接参考：http://www.runoob.com/tags/ref-canvas.html - 绘制弧线
arc(x,y,r,start,stop) //x为圆的中心坐标，y为圆的中心纵坐标start为开始的位置，stop为线条结束的 位置，如果start=0，stop=2Math.pi（圆的弧度=2PIR/R），那么就是一整个圆。
context.beginPath(); //开始一条新路径或重置当前路径
context.arc(100,100,40,0,2*Math.PI);//定义原型
context.stroke(); //绘制线条
context.fill(); //填充当前的绘制路径
- 画饼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas简单画饼</title>
<style>
</style>
</head?>
<body>
<canvas id="myCanvas" width="700" height="600" style="border: 1px solid #eee">
</canvas>
<script>
var canvs = document.getElementById("myCanvas");
var context = canvs.getContext("2d");
var data_arr = [0.25,0.4,0.1,0.25]; //饼图比例分配
var color_arr = ["blue","yellow","red","green"]; //对应比例的颜色
var text_arr = ["第一个月","2月","3月","4月"];
var oPi = Math.PI*2;
var startAgl = 0;//画饼的start位置
var stopAgl;
for(var i=0; i<data_arr.length;i++){
stopAgl = data_arr*oPi+startAgl;
context.fillStyle = color_arr[i];
context.beginPath(); //清除前面的绘制影响,使的最后一次不会覆盖之前的颜色样式
context.moveTo(300,300); // 画笔在坐标（300,300）开始绘制线条1,坐标（300,300）为圆心坐标
context.arc(300,300,100,startAgl,stopAgl);//这条语句执行时圆弧已经绘制了。弧度为stopAgl.
context.lineTo(300,300); //此时画笔的位置在stopAgl所在的位置，线条结束点为圆心。
context.stroke(); //绘制线条
context.fill(); //用fillstyle的颜色进行填充
//图例绘制
context.fiiRect(500,30+20*i,18,18);
context.fillStyle="#000";
context.fillText(text_arr[i],500,32+20*i);
}
</script>
</body>
</html>
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
