HTML5的canvas写会走动的钟

最新推荐文章于 2022-05-30 02:54:54 发布

重新学习的前端仔

最新推荐文章于 2022-05-30 02:54:54 发布

阅读量198

点赞数 1

分类专栏：被逼的

本文链接：https://blog.csdn.net/qq_42158442/article/details/82801180

版权

被逼的专栏收录该内容

6 篇文章 0 订阅

订阅专栏

四) 使用moveTo()和lineTo()绘制路径

第四章 HTML5中的canvas

一) canvas基础

canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可以在其中进行图形的绘制。

但绘制图形，并不是指使用鼠标作画，而是需要javascript进行配合。创建canvas的时候，他默认的宽高为300px*150px。

<canvas id="canvas">我是一个画布</canvas>

二) 绘制矩形

我们在HTML页面中直接插入canvas标签，也可以对它设置宽度和高度，切记设置canvas的时候不可以利用css样式进行设置。

<canvas id="canvas" width="400" height="300">我是一个画布</canvas>

那么，我们想在canvas上面画出矩形，我们就需要认识以下几种api

方法	描述
getContext()	获取绘图环境，可选参数"2d"
fillRect(x,y,width,height)	绘制一个填充的矩形
strokeRect(x,y,width,height)	绘制一个矩形的边框
clearRect(x,y,width,height)	清除指定矩形区域。

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.fillRect(50,50,100,100)//绘制填充的"黑色"的矩形

</script>

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.strokeRect(50,50,100,100)//绘制填充的"黑色"的矩形

</script>

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.fillRect(50,50,100,100)//绘制填充的"黑色"的矩形

ctx.clearRect(50,50,10,10)//清除"x=50,y=50,宽度为10,高度为10的区域"

</script>

但有些时候，我们希望能够修改矩形的样式，又不可以直接通过修改css方式来修改。那么在canvas中也提供了api为我们来修改样式。

方法	描述
fillStyle	填充背景颜色
strokeStyle	设置边框颜色
lineWidth	设置边框的宽度

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.fillStyle = "red"//绘制填充的"红色"的矩形

ctx.fillRect(50,50,100,100)

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.strokeStyle = "red"//绘制边框的"红色"的矩形

ctx.lineWidth = "10"//设置边框宽度

ctx.strokeRect(50,50,100,100)

注意:在绘制矩形的过程中，必须是绘制样式在绘制图形之前。

三) canvas绘制圆形

我们来看下如何在canvas中绘制一个圆形，绘制圆形分为4个步骤。

1) 开始绘制路径(beginPath)

2) 创建图像路径

3) 路径创建完成后，关闭路径

4) 设定绘制样式，调用绘制方法，绘制路径(closePtah)

绘制圆形,canvas也为我们提供了arc这个方法,

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

该方法有6个参数，x为绘制圆形的起点横坐标，y表示绘制圆形的起点的纵坐标,radius表示圆的半径，startAngle为开始角度，endAngle为结束的角度, anticlockwise是否按照顺时针方向进行绘制。false表示顺时针。（默认为顺时针）。

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.beginPath()

ctx.arc(100,100,50,0,90*Math.PI/180,false)

ctx.stroke()

ctx.closePath()

其中有个弧度转换的公式：degreens*Math.PI/180，绘制圆形默认按照以下的位置进行切换。

四) 使用moveTo()和lineTo()绘制路径

我们可以使用moveTo()和lineTo()绘制直线，或者是自己想要的图形，不局限于矩形。

方法	描述
moveTo(x,y)	不绘制，只是将当前位置移动到新的目标点
lineTo(x,y)	不仅将当前位置移动到新的目标点(x,y)，而且在两个坐标之间画一条直线。
linejoin	设置两线段连接处所显示的样子。round,bevel,miter
lineCap	线段端点显示的样式
save	保存绘画路径
restore	销毁路径

注意:我们使用两个方法的时候，要注意使用closePath()闭合。因为它会通知canvas当前绘制的图形已经闭合或者形成了完全封闭。(linejoin)

6.绘制变形图形

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>走动的表</title>
		<style>
			body{
				background: black;
			}
			canvas{
				background: #fff;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400">
			不支持
		</canvas>
		
	</body>
</html>

js脚本代码

<script>
			var oC = document.getElementById("canvas")
			var oGC = oC.getContext("2d")
			
			function draw(){
				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
				
				//60个小刻度
				var x = 200
				var y = 200
				var r = 150
				
				
				oGC.save()//保存绘画路径
				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)
				}
				
				oGC.closePath()//结束绘画
				oGC.stroke()
				oGC.restore()//销毁路径
				
				//第一个大圆
				oGC.save()
				oGC.beginPath()
				oGC.fillStyle = "white"//填充背景颜色
				oGC.moveTo(x,y)//不绘制，只是将当前位置移动到新的目标点
				oGC.arc(x,y,r*19/20,0,360*Math.PI/180)
				oGC.closePath()
				oGC.fill()//填充当前的图像（路径）。默认颜色是黑色。
				oGC.restore()
				
				
				//12个大刻度
				oGC.save()
				oGC.beginPath()
				oGC.lineWidth = 3
				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)
				}
				oGC.closePath()
				oGC.stroke()
				oGC.restore()
				
				
				//第二个圆
				oGC.save()
				oGC.beginPath()
				oGC.fillStyle = "white"//
				oGC.moveTo(x,y)
				oGC.arc(x,y,r*18/20,0,360*Math.PI/180)
				oGC.closePath()
				oGC.fill()
				oGC.restore()
				
				//时针
				oGC.save()
				oGC.beginPath()
				oGC.moveTo(x,y)
				oGC.strokeStyle = "blue"//设置边框颜色
				oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue)
				oGC.closePath()
				oGC.stroke()//绘制当前路径的边框
				oGC.restore()
				//分针
				oGC.save()
				oGC.beginPath()
				oGC.moveTo(x,y)
				oGC.strokeStyle = "green"//设置边框颜色
				oGC.arc(x,y,r*12/20,oMinValue,oMinValue)
				oGC.closePath()
				oGC.stroke()
				oGC.restore()
				//秒针
				oGC.save()
				oGC.beginPath()
				oGC.moveTo(x,y)
				oGC.strokeStyle = "red"
				oGC.arc(x,y,r*16/20,oSecValue,oSecValue)
				oGC.closePath()
				oGC.stroke()
				oGC.restore()
			}
			setInterval(function(){
				draw()
			},1000)
			draw()
		</script>

重新学习的前端仔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML5的canvas写会走动的钟

目录第四章 HTML5中的canvas一) canvas基础二) 绘制矩形三) canvas绘制圆形四) 使用moveTo()和lineTo()绘制路径第四章 HTML5中的canvas一) canvas基础 canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可...
复制链接

扫一扫

专栏目录