JS canvas 表情

最新推荐文章于 2024-08-07 05:09:36 发布

ljsalove

最新推荐文章于 2024-08-07 05:09:36 发布

阅读量891

点赞数

分类专栏： JS canvas 打卡表情文章标签： canvas javascript

本文链接：https://blog.csdn.net/ljsalove/article/details/51388107

版权

JS canvas 打卡表情专栏收录该内容

0 篇文章 0 订阅

订阅专栏

JS canvas基础摘要绘制圆弧曲线。

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

注意：Math.PI=180°

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="MFF">
<meta name="Keywords" content="path">
<meta name="Description" content="path canvas">
<title>Document</title>
<style>
canvas{border:medium red dotted ;margin:4px}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 5;
ctx.fillStyle="red";
ctx.strokeStyle ="black";

ctx.beginPath();

ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,200);
ctx.lineTo(200,100);
ctx.lineTo(100,200);

ctx.closePath();

//ctx.rect(200,100,100,100);
//fill()里填充的是fillStyle属性
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(200,250,50,0,Math.PI,true);
ctx.stroke();
ctx.closePath();

</script>
</body>
</html>