html5 canvas 画图基本教程

最新推荐文章于 2022-05-10 12:25:06 发布

kongjiea

最新推荐文章于 2022-05-10 12:25:06 发布

阅读量1.4k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/kongjiea/article/details/22877403

版权

html5 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

<!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);
 	})
 }

kongjiea

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas 画图基本教程

#box{width:200px;height: 200px;border:1px solid #000;} canvas{border: 1px solid #DDD;} /*创建一个canvas对象，并且获取到canvas的上下文 - context，用来访问画布相关API*/var canvas = document.getElementById('mycanvas
复制链接

扫一扫

专栏目录