本文主要是介绍canvas画一个笑脸和画一个三角形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
画一个笑脸主要用到的是画弧形的方法：arc，有五个参数：起始坐标，半径，弧形起始坐标，还有一个参数是顺时针还是逆时针。画的笑脸：虽然丑了点，但是学习了
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><canvas id="myCanvas" width="500" height="500"></canvas><script>const canvas = document.getElementById('myCanvas')if (canvas.getContext) {const ctx = canvas.getContext('2d')// ctx.fillStyle = 'red'// 画一个圆形（圆心坐标，半径，起始弧度，结束弧度, 顺时针还是逆时针：true/false）ctx.beginPath()ctx.arc(150, 150, 100, 0, Math.PI * 2)// 画完之后，得填充一下,不然看不到// ctx.fill()// 只画路径ctx.stroke()// ctx.closePath()// 画笑脸的嘴角:可以使用移动画笔的操作:moveTo(x,y) 移动到指定位置// ctx.beginPath()// 移动到开始落画笔的地方，不然会带上半径一起画出来ctx.moveTo(200, 150)ctx.arc(150, 150, 50, 0, Math.PI)ctx.stroke()// ctx.closePath()// 画眼睛// ctx.beginPath()ctx.moveTo(120, 100)ctx.arc(100, 100, 20, 0, Math.PI * 2)// ctx.fill()ctx.stroke()// ctx.closePath()// 画眼睛// ctx.beginPath()ctx.moveTo(220, 100)ctx.arc(200, 100, 20, 0, Math.PI * 2)// ctx.fill()ctx.stroke()ctx.closePath()}</script></body>
</html>
还有画一个三角形：主要用的是画线的方法：lineTo，有两个参数，起始坐标。记得画之前，先将画笔的坐标移动到某个位置
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div>画一条直线</div><canvas id="myCanvas" width="500" height="500"></canvas><script>// 获取画布var canvas = document.getElementById('myCanvas')// 获取画笔var context = canvas.getContext('2d')// 画线的时候要有起点和终点context.moveTo(0, 0)// 终点: 100, 0context.lineTo(100, 0)context.lineTo(50, 100)context.lineTo(0, 0)// 画线context.stroke()context.fill()</script></body>
</html>
这篇关于canvas画一个笑脸和画一个三角形的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
