<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width:200px;height: 200px;border:1px solid #000;}
canvas{border: 1px solid #DDD;}
</style>
</head>
<body>
<div id="box">
<canvas id="mycanvas"></canvas>
</div>
<script type="text/javascript">
/*创建一个canvas对象,并且获取到canvas的上下文 - context,用来访问画布相关API*/
var canvas = document.getElementById('mycanvas'); //取得HTML中定义的canvas元素
var context = canvas.getContext('2d'); //获取2D图形的上下文context
var box=document.getElementById('box');
/*练习1:绘制直线 */
/*context.beginPath();
context.moveTo(100,100);
context.lineTo(250,50);
context.lineWidth = 10; //这里我们设置直线的粗细,大家应该看到效果
context.strokeStyle = '#C77405'; //这里我们设置直线的颜色
context.lineCap = 'round'; //这里设置直线两端端点样式,包含三种:butt,round和square,其中缺省 butt
context.stroke();*/
/*练习2:绘制曲线*/
//定义相关的参数
canvas.height=box.offsetHeight/2;
canvas.width=box.offsetWidth/2;
var x = canvas.width/2;
var y = canvas.height/2;
var radius = x-8;
var startAngle = 1.5*Math.PI;
var endAngle = 3.2*Math.PI;
var counterClockwise = false;
var mylinear;
mylinear=context.createLinearGradient(x*2,y,0,y/2);//上到左方线性渐变
mylinear.addColorStop(0,"#ff9900");
mylinear.addColorStop(0.5,"#ff6600");
mylinear.addColorStop(1,"#ff3300");
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 10;
context.strokeStyle = mylinear;
context.stroke();
/*练习3:绘制二次曲线*/
context.beginPath();
context.moveTo(20, 20); // 上下文起点坐标
context.quadraticCurveTo(150,150,150,20); // 前两个参数是控制点坐标,后两个参数是终止点坐标
context.lineWidth = 10;
context.strokeStyle = '#C77405';
context.stroke();
/*练习4:绘制贝塞尔曲线*/
context.beginPath();
context.moveTo(20,20);
context.bezierCurveTo(20,100,200,100,200,20); //参数类似二次曲线,只不过有两个控制坐标
context.stroke();
</script>
</body>
</html>
附加个人圆形进度条:
<style type="text/css">
li{width:148px;heihgt:148px;list-style: none;float: left;margin:10px;border:1px solid #999;overflow: hidden;}
</style>
<ul>
<li><canvas class="process" width="148" height="148">25%</canvas></li>
<li><canvas class="process" width="148" height="148">50%</canvas></li>
<li><canvas class="process" width="148" height="148">75%</canvas></li>
<li><canvas class="process" width="148" height="148">100%</canvas></li>
</ul>
$.fn.process=function(o){
var c=$(this);
var c_parents=c.parents('li');
var c_w=c_parents.width(),c_h=c_parents.height();
var d={
bgColor:'#ddd',//进度背景的颜色
lineWidth:3,//进度和背景曲线的边框大小
txtColor:'#e74c3c',//进度字体的颜色
txtSize:'14px'//进度字体的大小
}
var opts=$.extend({},d,o);
c.each(function(){
$(this).attr({'width':c_w,'height':c_w});
var text =$(this).text();
var process = text.substring(0, text.length - 1);
// 一个canvas标签
var canvas = this;
// 拿到绘图上下文,目前只支持"2d"
var context = canvas.getContext('2d');
// 将绘图区域清空,如果是第一次在这个画布上画图,画布上没有东西,这步就不需要了
// context.clearRect(0, 0, 20,20);
//定义曲线参数
var x=c_w/2,//圆点x坐标
y=c_h/2,//圆点y坐标
radius=x-opts.lineWidth-2,//半径,父级宽度的一半减去曲线的宽度
startAngle=-Math.PI *0.5,
endAngle=(Math.PI *2*process/100)-Math.PI *0.5,
counterClockwise=false;//顺逆时
// 画背景
context.beginPath();
context.arc(x, y,radius,0,Math.PI * 2 , false);
context.strokeStyle =opts.bgColor;
context.lineWidth=opts.lineWidth;
context.stroke();
// 画进度
var mylinear;//定义进度渐变规则
if (process>0 && process<=25 ) {
mylinear=context.createLinearGradient(x,0,x*2,y);// 创建一个线性渐变
mylinear.addColorStop(0,"#ff9900");
mylinear.addColorStop(1,"#ff8900");
}else if(process>25 && process<=50 ){
mylinear=context.createLinearGradient(x,0,x,y*2);// 创建一个线性渐变
mylinear.addColorStop(0,"#ff9900");
mylinear.addColorStop(0.5,"#ff7a00");
mylinear.addColorStop(1,"#ff4e00");
}else if(process>50 && process<=75 ){
mylinear=context.createLinearGradient(x*2,0,0,y*2);// 创建一个线性渐变
mylinear.addColorStop(0,"#ff9900");
mylinear.addColorStop(0.5,"#ff6000");
mylinear.addColorStop(0.75,"#ff4000");
mylinear.addColorStop(1,"#ff2000");
}else if(process>75 && process<=100 ){
mylinear=context.createLinearGradient(x*2-x/2,0,0,y*2-y/2);// 创建一个线性渐变
mylinear.addColorStop(0,"#ff9900");
mylinear.addColorStop(0.25,"#ff7a00");
mylinear.addColorStop(0.5,"#ff4e00");
mylinear.addColorStop(0.75,"#ff2000");
mylinear.addColorStop(1,"#ff0000");
}
context.beginPath();
context.arc(x,y,radius,startAngle,endAngle,counterClockwise);
context.strokeStyle = mylinear;
context.lineWidth=opts.lineWidth;
context.stroke();
//在中间写字
context.font = "bold "+ opts.txtSize + " Arial";
context.fillStyle = opts.txtColor;
context.textAlign = 'center';
context.textBaseline = 'middle';
context.moveTo(x, y);
context.fillText(text, x, y);
})
}