画布

画布
画布就是一个标签,没有绘图功能,有绘图功能的是图形上下文。

获取图形上下文
getContext()

绘制步骤
获取canvas对象
var canvas = document.getElementById(‘canvas’)
获取图形上下文
var context = canvas.getContext(‘2d’)
设置绘图的样式
context.fillStyle = ‘red’ 填充色
context.strokeStyle = ‘pink’ 边框色
设置线宽
context.lineWidth=5
绘制图形
context.fillRect() 填充矩形
context.strokeRect() 边框矩形

矩形
fillRect(起点的x轴坐标,起点的y轴坐标,矩形的宽度,矩形的高度)
strokeRect(起点的x轴坐标,起点的y轴坐标,矩形的宽度,矩形的高度)
clearRect(起点的x轴坐标,起点的y轴坐标,矩形的宽度,矩形的高度)

//矩形
		window.onload=function(){
			//获取画布节点
			var canvas=document.getElementById("canvas");
			//获取上下文
			var context=canvas.getContext("2d");
			//设置样式
			context.fillStyle='red';
			// context.fillStyle='green';
			//设置线宽
			context.linewidth=5;
			//绘制图形,参数:x坐标,y坐标,矩形的宽度,矩形的高度
			context.fillRect(0,0,50,60);
			context.fillRect(200,200,50,50);

		}

圆形
创建路径
context.beginPath()

设置路径
context.arc(圆心的x轴,圆心的y轴,半径,开始的角度,结束的角度,顺时针false/逆时针true)
Math.PI 180度

关闭路径
context.closePath()
设置样式
context.fillStyle = ‘red’
context.strokeStyle = ‘pink’
绘制圆形
context.fill()实心圆
context.stroke()空心圆


	//圆
		window.onload=function(){
			//获取画布节点
			var canvas=document.getElementById("canvas");
			//获取上下文
			var context=canvas.getContext("2d");
			//设置开始路径
			context.beginPath();
			//设置圆的路径,参数:圆心的x轴,圆心的y轴,半径,开始的角度,结束的角度,绘制方向,顺时针false/逆时针true
			context.arc(200,200,100,0,Math.PI*2,false);
			//闭合路径
			context.closePath();
			//绘制的样式
			context.fillStyle='pink';
			context.strokeStyle='coral';
			context.lineWidth=10;
			//实心圆
			//context.fill();
			//空心圆
			context.stroke();		
		}

直线
开始路径
context.beginPath()
直线的开始位置
context.moveTo(起点的x轴坐标,起点的y坐标)
直线的结束位置
context.lineTo(终点的x轴坐标,终点的y坐标)
结束路径
context.closePath()
设置样式
绘制
context.fill()
context.stroke()


	//直线
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//设置开始路径
		context.beginPath();
		//设置起点 ,参数:起点横坐标,起点纵坐标
		context.moveTo(100,100);
		//设置直线重点位置
		context.lineTo(300,300);
		context.strokeStyle="green";
		context.stroke();
	}
	

折线


	//折线
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//设置开始路径
		context.beginPath();
		//设置起点 ,参数:起点横坐标,起点纵坐标
		context.moveTo(0,300);
		context.lineTo(150,100);
		context.moveTo(150,100);
		context.lineTo(250,300);
		context.moveTo(250,300);
		//设置直线重点位置
		context.lineTo(400,200);
		context.strokeStyle="green";
		context.stroke();
	}	

曲线
开始路径
context.benginPath()
开始的位置
context.moveTo(x,y)
控制点
两个控制点的:
context.bezierCurveTo(第一个控制点的x轴位置,第一个控制点的y轴位置,第二个控制点的x轴位置,第二个控制点的y轴位置y,结束点x轴,结束点的y轴)
如果想要上面的曲线更弯曲,就把x轴变大,y轴变小
如果想要下面的曲线更弯曲,就把x轴变小,y轴变大

一个控制点的:
context.quadraticCurveTo(控制点的x轴,控制点的y轴,结束点的x轴,结束点的y轴)
闭合
context.closePath()
绘制
context.stroke()
context.fill()
默认颜色是黑色
线宽是1

//曲线
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//设置开始路径
		context.beginPath();
		//设置起点 ,参数:起点横坐标,起点纵坐标
		context.moveTo(0,400);
		//context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
		//context.bezierCurveTo(180,20,250,390,400,400)
		//设置直线重点位置
		context.quadraticCurveTo(200,370,200,200);
		context.moveTo(400,0);
		context.quadraticCurveTo(200,30,200,200);
		context.moveTo(0,0);
		context.quadraticCurveTo(200,30,200,200);
		context.moveTo(400,400);
		context.quadraticCurveTo(200,370,200,200);
		context.strokeStyle="green";
		context.fillStyle='red';
		//context.closePath();
		context.stroke();
	}	

渐变
线性渐变:
创建一个渐变的对象
var gradient = context.createLinearGradient(起始点x坐标,起始点y坐标,结束点x坐标,结束点y坐标)

添加渐变的颜色
gradient.addColorStop(偏移量【0-1】,‘color’)

设置填充渐变
context.fillStyle = gradient
使用渐变绘制矩形
context.fillRect(0,0,400,400)

//线性渐变
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//创建渐变对象  起始横坐标 ,起始纵坐标 ,结束点横坐标  ,结束的纵坐标
		var gradient=context.createLinearGradient(0,0,400,400);
		//添加渐变的颜色 参数:偏移量,颜色
		gradient.addColorStop(0,'blue');
		gradient.addColorStop(0.5,'pink');

		gradient.addColorStop(0.9,'white');
		//设置渐变样式
		context.fillStyle=gradient;
		//绘制
		context.fillRect(0,0,400,400);
	}	

径向渐变
创建一个渐变的对象
var gradient = context.createRadialGradient(起始圆的圆心x坐标,y坐标,半径,结束圆的圆心x坐标,y坐标,半径)

添加渐变的颜色
gradient.addColorStop(偏移量【0-1】,‘color’)

设置填充渐变
context.fillStyle = gradient

使用渐变绘制矩形
context.fillRect(0,0,400,400)

//径向渐变
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		//创建渐变对象  起始横坐标 ,起始纵坐标 
		var gradient=context.createRadialGradient(200,200,50,200,200,200,150);
		//添加渐变的颜色 参数:偏移量,颜色
		gradient.addColorStop(0,'blue');
		gradient.addColorStop(0.5,'white');

		gradient.addColorStop(1,'pink');
		//设置渐变样式
		context.fillStyle=gradient;
		//绘制
		context.fillRect(0,0,400,400);
	}	

变形
平移
context.translate(平移的距离,平移的距离)
缩放
context.scale(缩放的备数,缩放的备数)
旋转
context.rotate(角度)

//变形
	window.onload=function(){
		//获取画布节点
		var canvas=document.getElementById("canvas");
		//获取上下文
		var context=canvas.getContext("2d");
		context.fillStyle='red';
		//平移  参数:原点平移的位置
		//context.translate(100,100);

		//缩放 参数:缩放的倍数
		context.scale(0.5,0.5);

		//旋转  参数:旋转的角度
		context.rotate(Math.PI/4);
		context.fillRect(0,0,200,200);
	}	

注意:所有的变形都是针对,坐标轴,与绘制的矩形无关

太极图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>太极图</title>
	<style>
		canvas{
			/*margin: 0 auto;*/
			/*border: 1px solid red;*/
			animation-name: move;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		@keyframes move{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}
	</style>
	<script>
		window.onload=function(){
			var canvas=document.getElementById('canvas');
			var context=canvas.getContext('2d');

			context.beginPath();
			context.arc(200,200,200,Math.PI/2,Math.PI*3/2);
			context.closePath();
			context.fillStyle='black';
			context.fill();

			context.beginPath();
			context.arc(200,200,200,Math.PI*3/2,Math.PI/2);
			context.closePath();
			context.fillStyle='red';
			context.fill();

			context.beginPath();
			context.arc(200,100,100,0,Math.PI*2);
			context.closePath();
			context.fillStyle='black';
			context.fill();

			context.beginPath();
			context.arc(200,300,100,0,Math.PI*2);
			context.closePath();
			context.fillStyle='red';
			context.fill();

			context.beginPath();
			context.arc(200,300,20,0,Math.PI*2);
			context.closePath();
			context.fillStyle='black';
			context.fill();

			context.beginPath();
			context.arc(200,100,20,0,Math.PI*2);
			context.closePath();
			context.fillStyle='red';
			context.fill();
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值