【Canvas】画布-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_57567877/article/details/136992997

本文详细介绍了HTML5canvas的基本语法，包括画布设置、矩形与圆形绘制、颜色管理，以及如何利用帧动画实现动态效果。通过实例展示了如何使用`arc`函数画圆和创建简单的帧动画，如移动图片和循环动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas

基础语法
画圆
canvas帧动画

基础语法

<style>
		#myCanvas{
			border: 1px solid green;
			/*画布多宽，样式就多宽（不然画布多出去的地方就会看不见）*/
			width: 1024px;
			height: 500px;
		}
	</style>
</head>
<body>
	<!--
		canvas：画布（线条、矩形、弧度），不是矢量图，会模糊

		svg：通过坐标来画的，是矢量，可以无限放大不会模糊

		替代flash
	-->

	<!--画布-->
	<canvas id="myCanvas" width="1024" height="500"></canvas>

<script>
	/*1.获取节点*/
	let myCanvas=document.getElementById("myCanvas");
	/*2.上下文的环境*/
	myCanvas=myCanvas.getContext("2d");



	/*矩形*/
	//方法1：
	myCanvas.rect(80,80,200,100) //x,y,w,h
	// myCanvas.fill() //画实心，默认填充黑色
	myCanvas.stroke() //画轮廓

	//方法1：
	myCanvas.fillRect(200,200,200,100) //画实心矩形
	myCanvas.strokeRect(400,450,200,100) //画空心矩形



	/*改色*/
	myCanvas.fillStyle="pink"; //设置实心颜色
	myCanvas.fillRect(600,200,200,100)
	myCanvas.strokeStyle="#f68521"; //设置空心颜色
	myCanvas.strokeRect(400,250,200,100)

	//下一次再画，不改色的话还是上次的色
	myCanvas.fillStyle="pink";
	myCanvas.fillRect(802,200,200,100)



	/*直线*/
	//x,y
	myCanvas.beginPath(); //打开绘制路径（提笔）

	myCanvas.moveTo(500,10); //起点
	myCanvas.lineTo(500,200); //终点
	myCanvas.strokeStyle="#f032df"; //改色
	myCanvas.lineWidth=20; //粗细

	myCanvas.stroke(); //画

	//L形
	myCanvas.beginPath();
	myCanvas.moveTo(20,400);
	myCanvas.lineTo(20,450);
	myCanvas.lineTo(100,450); //可以接着继续
	myCanvas.strokeStyle="red";
	myCanvas.lineWidth=10;
	myCanvas.stroke();

	//三角形
	myCanvas.beginPath();
	myCanvas.moveTo(20,300);
	myCanvas.lineTo(20,350);
	myCanvas.lineTo(100,350);
	myCanvas.strokeStyle="black"; //轮廓颜色
	myCanvas.fillStyle="yellow"; //实心颜色
	myCanvas.lineWidth=10;
	myCanvas.closePath(); //闭合路径
	myCanvas.stroke(); //画轮廓
	myCanvas.fill(); //画实心

	//线头（圆头、方头）
	myCanvas.beginPath();
	myCanvas.moveTo(700,50);
	myCanvas.lineTo(1000,50);
	myCanvas.strokeStyle="red";
	myCanvas.lineWidth=30;
	myCanvas.lineCap="round"; //方头：square
	myCanvas.stroke();

</script>

效果图：

在这里插入图片描述

画圆

<style>
		#myCanvas{
			width: 1024px;
			height: 500px;
			border: 1px solid green;
		}
	</style>
</head>
<body>

	<!--画布-->
	<canvas id="myCanvas" width="1024" height="500"></canvas>

<script>
	let myCanvas=document.getElementById("myCanvas").getContext("2d");

	/*画圆： x,y,r,起点弧度,终点弧度,布尔值*/
	//角度 * Pi / 180 = 弧度

	myCanvas.beginPath();
	myCanvas.arc(100,100,50,0,90*Math.PI/180,true);  //true逆时针，false顺时针
	// myCanvas.arc(100,100,50,0,360*Math.PI/180,true);  //完整的圆
	myCanvas.stroke(); //空心
	myCanvas.fill(); //实心

</script>

效果图

在这里插入图片描述

canvas帧动画

<style>
		#myCanvas{
			width: 1024px;
			height: 500px;
			border: 1px solid green;
		}
		img{
			display: none;
		}
	</style>
</head>
<body>

	<!--画布-->
	<canvas id="myCanvas" width="1024" height="500"></canvas>
	<!--参照物-->
	<img src="images/wang.png" alt="" id="web">
	<img src="images/yingbi.png" alt="" id="coin">
	<img src="images/wangXCY.png" alt="" id="fish">
	
<script>
	let myCanvas=document.getElementById("myCanvas").getContext("2d");

	//获取图片节点
	let web=document.getElementById("web")
	let coin=document.getElementById("coin")
	let fish=document.getElementById("fish")

	//画图片 --> 会出现空白的情况画不出来，是因为图片尚未加载完毕就开始绘图
	window.onload=function () {

		//方法1：drawImage(图片对象,x,y)
		myCanvas.drawImage(web,100,100);


		//方法2：drawImage(图片对象,x,y,宽,高)
		myCanvas.drawImage(web,100,350,50,50);


		//方法3：drawImage(图片对象,切割的起始坐标x,切割的起始坐标y,切割的宽度,切割的高度,绘制的坐标x,绘制的坐标y,绘制的宽度,绘制的高度)

		// myCanvas.drawImage(coin,0,0,60,60,500,300,60,60);
		//第3个参数的改变可以让金币转起来
		let y=0;
		function drawMoney() {
			//clearRect(x,y,宽,高)，清空画布（也可以避免看到**上一次**画的东西）
			myCanvas.clearRect(500,300,60,60)
			myCanvas.drawImage(coin,0,y,60,60,500,300,60,60);
			y+=60;
			if(y>=600){
				y=0;
			}
		}
		setInterval(drawMoney,100)


		//画鱼
		let fishY=0;
		let fishMoveX=100;
		function drawFish() {
			myCanvas.clearRect(fishMoveX-10,50,78,64)
			myCanvas.drawImage(fish,0,fishY,78,64,fishMoveX,50,78,64);
			fishY+=64;
			if(fishY>=192){
				fishY=0;
			}
			fishMoveX+=10;
			if(fishMoveX>=500){
				//清空结束时的残留画面
				myCanvas.clearRect(fishMoveX-10,50,78,64)
				fishMoveX=100;
			}
		}
		setInterval(drawFish,200)

	}

</script>