canvas初识及其简单使用

最新推荐文章于 2023-07-05 19:11:54 发布

休沢

最新推荐文章于 2023-07-05 19:11:54 发布

阅读量477

点赞数

分类专栏：小游戏文章标签： canvas

本文链接：https://blog.csdn.net/qq_44735496/article/details/107920279

版权

小游戏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

canvas
- canvas绘画方法
- 其他

canvas

1.Canvas是HTML5提供的一个标签,我们可以在这个盒子区域绘画
2.怎么绘画的呢? canvas对象有个一个方法可以让我们获取到一个CanvasRendderingContext2D对象,这个对象给我们提供了在canvas盒子上画图的功能.
3.不是所有的浏览器都支持canvas标签,几乎所有智能手机都支持这个标签
4.canvas市场:游戏,广告,动画,数据图形结合的复杂界面(可视化数据)
5.浏览器不支持的时候,它就像个p标签的功能

特点
1.网络请求传输 (面试：页面优化)
2.高性能：传输的时候只传输一个字符串，没有很多节点可以节省很多内存
3.游戏
4.可视化
5.数据图形结合产品
6.写在简历上，可以增加你的机会

canvas绘画方法

1、画直线的方法：
var pen=canvas.getContext(“2D”)可以获得绘画功能
起点位置：pen.moveTo(x,y)
轨迹方法：pen.lineTo(x,y)
上一次终点是下一次起点，连接下一个点
可以用pen.closePath()从终点连到起点
轨迹的颜色(不写默认黑色):pen.strokeStyle=’rgb(149,134,255)’//red,rgb(),rgba(),#521
填充颜色:pen.fillStyle=’rgb(149,134,255)’//red,rgb(),rgba(),#666
沿着轨迹绘制:只有轨迹是不行的,这一步才是真的绘制 pen.stroke()
如果想让每条轨迹颜色不一样，使用pen.beginPath()开辟新的轨迹

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="600px" height="400px"></canvas>
	</body>
	<script type="text/javascript">
		//一个等边三角形
		var canvas=document.querySelector("#canvas");
		var pen=canvas.getContext("2d")
		pen.moveTo(100,200);
		pen.lineTo(300,200)
		pen.lineTo(200,27)
		pen.lineTo(100,200)
		// pen.closePath()用于最后封口
		pen.stroke()
	</script>
</html>

2、画弧线方法：
pen.arc(x,y,r,起始角度，结束角度，顺逆时针)
x,y是圆心，r是半径，顺逆时针由布尔值判断
角度填弧度值(π:Math.PI)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>饼状图</title>
	</head>
	<body>
		<canvas id="canvas" width="600px" height="600px"></canvas>
		<script type="text/javascript">
			var canvas=document.querySelector("#canvas")
			var ctx=canvas.getContext("2d")
			var deg=Math.PI/180;
			var data=[
				{title:"电子1",money:240},
				{title:"电子2",money:240},
				{title:"电子3",money:240},
				{title:"电子4",money:240},
				{title:"电子5",money:240},
				{title:"电子6",money:240}
			]
			
			var data2=[
				{name:"生活服务"},
				{name:"油盐酱醋"},
				{name:"王者荣耀充值"},
				{name:"吃饭开销"},
				{name:"吃饭开销2"},
				{name:"吃饭开销3"}
			]
			var r=200;
			ctx.moveTo(300,300);
			ctx.lineTo(300+r,300)
			
			var total=data.reduce((sum,next)=>{
				return {money:sum.money+next.money}
			})
			//推导过程
			/* var angle=data[0].money/total.money*360
			var starAngle=0*deg
			var endAngle=angle*deg
			ctx.arc(300,300,200,starAngle,endAngle)
			ctx.lineTo(300,300)
			
			var angle2=data[1].money/total.money*360
			var starAngle=endAngle
			var endAngle2=endAngle+angle2*deg
			ctx.arc(300,300,200,starAngle,endAngle2)
			ctx.lineTo(300,300)
			 */
			
			function f1(index,endAngle){
				if(index==data.length){
					return
				}else {
					var angle=data[index].money/total.money*360*deg;
					var start=endAngle;
					var end=angle+endAngle;
					ctx.arc(300,300,200,start,end);
					ctx.lineTo(300,300);
					var nextIndex=index+1;
					ctx.fillStyle='#'+ Math.random().toString(16).substr(-6);//随机色
					ctx.fill()
					
					ctx.stroke()
					ctx.fillText(data2[index].name,300+270*Math.cos(endAngle+angle/2),300+270*Math.sin(endAngle+angle/2));
					ctx.beginPath()
					f1(nextIndex,end)//回调
				}
			}
			ctx.strokeStyle="lightblue"
			ctx.fill()		
			f1(0,0)
		</script>
	</body>
</html>

在这里插入图片描述

其他

3.文字的绘制不用加pen.stroke()
文字样式
pen.font = “30px Verdana, Geneva, sans-serif”;
//font复合属性:以前css的font一样
绘制文字
pen.fillText(文字内容, x, y);//x,y起点

4.矩形//矩形
pen.fillRect(x,y,w,h)
参数:x,y起点 w,h宽高

5.清除区域
//清除
pen.clearRect(x,y,w,h)
参数:x,y起点 w,h宽高
//清屏
canvas.width=canvas.width//重新给画布设置宽度,整个界面就清除了,也可以达到清除效果

6.图片
pen.drawImage(img,x,y);//先学这个,img是图片对象
pen.drawImage(img,sx,sy,sw,sh,x,y,w,h);
参数:除红色参数外都是可选参数

img 图片对象//可以是标签对象,可以自己创建:var img=new Image();img.src=’xxx’
sx,sy 可选,剪切相对于(原始图片左上角开始)原始图片x,y 坐标
sw,sh可选,剪切原始图片的宽高
x,y 绘制图片的x,y坐标
w,h 可选,绘制图片的宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas style="border: 1px red solid;" id="canvas" width="600" height="600"></canvas>
		<img src="img/bird.jpg" >
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.getElementById("canvas")
				var ctx=canvas.getContext("2d");
				var img=document.querySelector("img");
				//设置全局变量 i，x让定时器里的动作跟着i，x的变化而变化
				var i=0;
				var x=0;
				var timer=setInterval(function(){
					x=x+16;
					i++;
					i=i%3;//有几个部分变化就对几取余
					ctx.drawImage(img,610/3*i,0,610/3,290,x,0,610/3,290)//610/3是一个鸟占的宽
				},250)
			}
		</script>
	</body>
</html>