canvas 二 canvas绘制表盘，及canvas曲线的绘制

最新推荐文章于 2024-09-14 22:43:29 发布

前端学习

最新推荐文章于 2024-09-14 22:43:29 发布

阅读量1.9k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/kaizi524/article/details/51332568

版权

前端同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

本文通过示例详细介绍了如何使用HTML5 canvas绘制动态的圆形表盘，包括时钟指针和刻度，并展示了如何绘制曲线，如arcTo、quadraticCurveTo和bezierCurveTo方法的用法，同时涵盖了canvas的transform变换操作。

摘要由CSDN通过智能技术生成

/**
 * 绘制圆
 * arc(x,y,半径,起始弧度，结束弧度,旋转方向)
 * 		x,y起始位置
 * 		弧度与角度的关系 : 弧度 = 角度*Math.PI/180
 * 		旋转方向:顺时针(默认false)、逆时针(true)
 */
var oc = document.getElementById('canvas');
var ogc = oc.getContext('2d');
//实例1绘制扇形
ogc.moveTo(200,200);
ogc.arc(200,200,150,0,90*Math.PI/180,false);
ogc.arc(200,200,150,0,90*Math.PI/180,true);
ogc.stroke();
//canvas表盘
function toDraw(){
	var x = 200;
	var y = 200;
	var r = 150;
	//9每次执行时清空画布
	ogc.clearRect(0,0,oc.width,oc.height);
	//8获取时间
	var oDate = new Date();
	var oHours = oDate.getHours();
	var oMin = oDate.getMinutes();
	var oSec = oDate.getSeconds();
	var oHoursValue = (-90+oHours*30 + oMin/2)*Math.PI/180; 
	var oMinvalue = (-90+oMin*6)*Math.PI/180;
	var oSecvalue = (-90+oSec*6)*Math.PI/180;
	/*ogc.moveTo(x,y);
	ogc.arc(x,y,r,0,6*Math.PI/180,false);

	ogc.moveTo(x,y);
	ogc.arc(x,y,r,6*Math.PI/180,12*Math.PI*180,true)*/
	//1绘制表盘
	ogc.beginPath();

	for(var i=0;i<60;i++){
		ogc.moveTo(x,y);
		ogc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

	}
	ogc.closePath();
	ogc.stroke();
	//2去掉圆点到刻度的线条,画圆并填充颜色覆盖
	ogc.fillStyle = 'white';
	ogc.beginPath();
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
	ogc.closePath();
	ogc.fill();
	//3绘制时针刻度
	ogc.beginPath();
	ogc.lineWidth=2;
	for(var i=0;i<12;i++){
		ogc.moveTo(x,y);
		ogc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

	}
	ogc.closePath();
	ogc.stroke();
	//4去掉时针刻度的线条,画圆并填充颜色覆盖
	ogc.fillStyle = 'white';
	ogc.beginPath();
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*18/20,0,360*Math.PI/180,false);
	ogc.closePath();
	ogc.fill();
	//5绘制时针
	ogc.beginPath();
	ogc.lineWidth = 5;
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*8/20,oHoursValue,oHoursValue,false);
	ogc.closePath();
	ogc.stroke();
	// 6绘制分针
	ogc.beginPath();
	ogc.lineWidth = 3;
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*12/20,oMinvalue,oMinvalue,false);
	ogc.closePath();
	ogc.stroke();
	// 7绘制秒针
	ogc.beginPath();
	ogc.lineWidth = 2;
	ogc.moveTo(x,y);
	ogc.arc(x,y,r*16/20,oSecvalue,oSecvalue,false);
	ogc.closePath();
	ogc.stroke();
	
}
toDraw();
setInterval(function(){
	toDraw();
},1000);
/
/**
 * 绘制曲线
 * artTo(x1,y1,x2,y2,r);
 * 		x1,y1第一组坐标
 * 		x2,y2第二组坐标
 * 		r:半径
 *贝塞尔曲线
 * quadraticCurveTo(dx,dy,x1,y1)
 * 		贝塞尔曲线：第一组控制点，第二组控制点
 * bezierCurveTo()
 * 		贝塞尔曲线：第一组控制点，第二组控制点，第三组结束点
 *
 * canvas变换
 * translate,rotate,scale
 */
ogc.moveTo(100,200);
ogc.arcTo(100,100,200,100,50);
ogc.stroke();
//quadraticCurveTo
ogc.moveTo(100,200);
ogc.quadrativCurveTo(100,200);
ogc.stroke();
//bezierCurzeTo
ogc.moveTo(100,200);
ogc.bezierCurveTo(100,100,200,200,200,100);
ogc.stroke();		

//canvas变换
ogc.translate(100,100);
ogc.rotate(45*Math.PI/180);
ogc.scale(2,1);
ogc.fillRect(0,0,100,100);