Html5之canvas笑脸getContextbeginPathmoveToarcstroke

Posted 2022-02-13 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html5之canvas笑脸getContextbeginPathmoveToarcstroke相关的知识，希望对你有一定的参考价值。

1、Css部分

.canvas_box 
	display: flex;
	justify-content: center;
	align-items: center;


.canvas 
	border: 1px solid #777;

2、html部分

<div class="canvas_box">
	<canvas class="canvas" id="idCanvas" width="121" height="119"></canvas>
</div>

3、javascript部分

function smilingFace(params) 
	// 获取画布
	let canvas = document.getElementById('idCanvas');

	// 用于验证浏览器是否支持canvas，
	// 它是h5的新特性，老版本ie不支持
	if (!idCanvas.getContext) return alert('浏览器不支持！');

	// 画笔，可选2d和3d
	let ctx = canvas.getContext("2d");

	ctx.beginPath();

	// 前两个圆心，后面半径，0代表从多少度开始画，
	// Math.PI*2表示完整的弧长，true代表逆时针
	ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
	ctx.moveTo(95, 60);

	// -------------------------------------
	// 顺时针画半圆（口）
	ctx.arc(60, 60, 35, 0, Math.PI, false);

	// -------------------------------------
	ctx.moveTo(45, 40);
	// 左眼小圆
	ctx.arc(40, 40, 5, 0, Math.PI * 2, true);

	// -------------------------------------
	ctx.moveTo(85, 40);
	// 右眼小圆
	ctx.arc(80, 40, 5, 0, Math.PI * 2, true);

	// -------------------------------------
	ctx.stroke();

smilingFace();