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

/**
 * 绘制圆
 * 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);

时间: 2024-10-18 19:19:31

canvas 二 canvas绘制表盘,及canvas曲线的绘制的相关文章

canvas二:绘制圆和其他曲线

1.绘制圆 绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯 绘制圆需要用到arc这个方法: arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向): 弧度与角度的关系:弧度 = 角度*Math.PI/180: 旋转方向:true(逆时针),false(顺时针),默认为顺时针: 实例:我想画一个半圆,先里一下思路,首先我们需要一个区域,也就是绘制路径,即beginPath, 然后我们再需要定义一个开始的绘制点,即moveTo,之后在进行绘圆操作,那么

canvas 绘制三次贝塞尔曲线

代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <script> function init() { var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d')

canvas二三事之签名板与视频绘制

今天,不知道怎么的就点开了语雀,然后就看到了<HTML5 Canvas 教程>,开始了canvas的研究(学习)之旅. 首先,想到的第一个东西就是签名板,上代码: <canvas id="canvas" width="600" height="600"></canvas> <button onclick="clearCtx()">clear</button> var

Android_2D绘图的学习Paint,Canvas(二)

前言 上一节,学会了Paint,Canvas的基本用法后,这一节,学习Paint的高级用法.还没看过上一节的请点击这里:Android_2D绘图的学习Paint,Canvas(一). 一,文字的绘制 在做UI的时候,常常会绘制文字,Canvas绘制文字时,主要考虑到字体的宽度和高度问题.字体的宽度比较好理解,这里我们主要考虑一下字体的高度. 先看一张图,网上搜的: 这里说明了在安卓中绘制字体时对于高度的划分:top,ascent,baseLine,descent,bottom.有点类似我们刚开始

Android中android.graphics下面的绘制图形类Canvas,Paint,Bitmap,Drawable

1.概念区别: 很多网友刚刚开始学习Android平台,对于Drawable.Bitmap.Canvas和Paint它们之间的概念不是很清楚, 其实它们除了Drawable外早在Sun的J2ME中就已经出现了,但是在Android平台中,Bitmap.Canvas相关的都有所变化. 首先让我们理解下Android平台中的显示类是View,但是还提供了底层图形类android.graphics,今天所说的这些均为graphics底层图形接口. Bitmap - 称作位图,一般位图的文件格式后缀为b

自定义View时,用到Paint Canvas的一些温故,讲讲平时一些效果是怎么画的(基础篇 二,图像遮盖,Canvas静态变化)

转载请注明出处:王亟亟的大牛之路 上一篇把简单的一些概念理一理,还画了个圈,那这一篇讲一下图像遮盖"Xfermode"和Canvas的旋转.平移等效果 Xfermode: AvoidXfermode 指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode 当覆盖已有的颜色时,应用一个简单的像素异或操作. PorterDuffXfermode 这是一个非常强大的转换模式,使用它,可以使用图像合成的16条Porter-Duff规则的任

使用canvas画布利用js通过鼠标实现矩形的绘制(任意方向的绘制图形)

## 使用canvas画布利用js通过鼠标实现矩形的绘制(任意方向的绘制图形)(如果要绘制其他图形,做一点小改动就行了) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #cav{ position

canvas绘画基础(一):认识canvas画布

html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canvas画布. 1 <style type="text/css"> 2 body {padding: 40px 0 0 40px;} 3 #canvas1,#canvas2 {background: #ff0000; opacity: 0.1; margin: auto;} 4 &l

二次、三次贝塞尔曲线demo(演示+获取坐标点)

二次贝塞尔曲线demo: See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(二次) 推荐点击以上链接使用  三次贝塞尔曲线demo: See the Pen bezierCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(三次) 推荐点击以上链接使用 二次.三次贝塞尔曲线demo(演示+获取坐标点)