当前位置：首页 > news >正文

H5画布绘制笑脸

news 来源：原创 2024/5/9 9:13:32

H5画布绘制笑脸

一、绘制三角形

canvas绘制三角形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>三角形</title>
		<style>
			#myCanvas{
				box-shadow: 0 0 5px black;
				margin-top: 50px;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<!--宽高只能在属性值设置，样式设置像素值有差别-->
		<canvas id="myCanvas" width="500" height="500">
		</canvas>
	</body>
	<script>
		//获取canvas对象b
		var canvas = document.getElementById("myCanvas");
		//上下文:理解：canvas标签内置画笔
		var ctx = canvas.getContext("2d");//目前仅支持2d画板
		//线段方法
		//1.新建一条路径
		ctx.beginPath();
		//2.设置起点,理解：移动画笔的位置
		ctx.moveTo(50,50);
		//3.设置另一个点坐标
		ctx.lineTo(100,100);
		//设置第三个点
		ctx.lineTo(200,100);
		//ctx.lineTo(50,50);
		//4.0闭合路径（不是必须的方法）:终点和起点关闭。
		ctx.closePath();
		//4.绘制
		ctx.stroke();
	</script>
</html>

在body中添加一个canvas元素创建画板，指定宽高度500px、id属性myCanvas用于定位。在style元素中给画板添加样式，box-shadow添加盒子阴影，margin-top、margin-left指定外边距。创建script元素编写js脚本。首先通过id获取画板变量，然后通过getContext(“2d”)方法获取上下文ctx。

线段的画法，首先通过ctx.beginPath()方法新建一条路径，然后通过ctx.moveTo(50, 50)设置移动画笔的起点，再通过ctx.lineTo(100, 100)设置另一个点的坐标、ctx.lineTo(200, 100)设置第三个点的坐标，接着通过ctx.closePath()闭合路径，最后使用ctx.stroke()绘制图形。
在这里插入图片描述

绘制图形，填充颜色

//获取canvas对象
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(350, 400);
//填充路径绘制，当使用fill函数绘制时，没有闭合的路径会默认闭合，不需要使用closePath()关闭路径，但是stroke()不会自动闭合
ctx.fill();

在这里插入图片描述

二、绘制矩形

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//绘制矩形直接绘制，路径自动创建，前两个起始位置，后两个宽高度
ctx.strokeRect(100, 100, 100, 200);
//绘制一个填充矩形
ctx.fillRect(0, 0, 100, 100);
//清除绘制，清除部分完全透明
ctx.clearRect(50, 50, 40, 40);
//清除画布
ctx.clearRect(0, 0, 100, 100);
//清除整个画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

三、绘制圆形

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
//绘制圆形或者圆弧使用arc()函数
//arc(x: Number, y: Number, radius: Number, startAngle: Number, endAngle: Number, anticlockwise: Boolean): none
//绘制一个以x,y为圆心，radius为半径，从startAngle弧度开始到endAngle结束，anticlockwise：绘制方向，布尔值，默认false顺时针
//顺时针画一个圆形
ctx.arc(200, 200, 50, 0, Math.PI*2, false);
//顺时针画半个圆，绘制的起点默认在最右边
ctx.arc(200, 200, 50, 0, Math.PI, false);
//起始位置90度，默认在右边顺时针走90度为起始位置
ctx.arc(200, 200, 50, Math.PI/2, Math.PI, true);
//绘制
ctx.stroke();

四、绘制笑脸

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "green";
ctx.arc(250,250,100,0,Math.PI*2,false);
ctx.fill();

ctx.beginPath();
//设置圆弧颜色为红色
ctx.strokeStyle = "red";
ctx.arc(250,250,70,0,Math.PI,false);
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(220,220,10,0,Math.PI*2,false);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(280,220,10,0,Math.PI*2,false);
ctx.fill();