0 0 7 6 - Canvas多边形‘实操’
本帖最后由 不二如是 于 2021-8-11 11:08 编辑比起让一件事变得很复杂，更重要的是把它变简单
没错，上面那句话，是我为75搞的一个说辞！
或许，正因为这种惯用“奥卡姆剃刀原理 Occam's Razor - 如无必要，勿增实体 ”让成年人的世界得到很多，也失去很多。。。
好吧，又是一句赤裸裸的废话
言归正传，继续用Canvas画一些基本图形。
使用Canvas第一步就是在body种添加调用说明。
然后写Javascript的代码，调用getContext（“2d”）。
最后，context.stroke()描边即可
这次画一个圆形和矩形吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
</head>
<body>
<canvas id="secondCanvas" width="666" height="666">大兄弟，你的浏览器不支持Canvas</canvas>
<script type="text/javascript">
var canvas=document.getElementById("secondCanvas");
var context=canvas.getContext("2d");
</script>
</body>
</html>
这个就应该算是最基本的Canvas使用结构了。
开始绘制矩形，就要用到strokeRect（）方法
context.lineWidth=6;
context.strokeStyle="#7F0";
context.strokeRect(150,250,199,299);
context.stroke();
背景图：
context.stroke(150,150,199,299)的意思是：
从（150，150）点开始，开始绘制一个宽为199，高为299的矩形。
还可以进行填充色.
context.fillStyle="#FFB7DD";
context.fillRect(150,250,199,299);
效果图：
再来绘制一个圆形吧，方法和65一样调用“Math.PI*2”
context.beginPath();
context.arc(500,300,100,0,Math.PI*2,false);
context.closePath();
context.stroke();
效果图：
★第一、二个参数，（500，300）代表圆心坐标
★第三个参数是圆的半径。
★第四个参数代表圆周起始位置。
0对应PI就是起始位置
沿顺时针路线，分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,为画饼图提供了扇形范围的依据。
★第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆。
★第六个参数是一个布尔值,true是顺时针false是顺时针.
因为在上面已经填色了，如果没有新的颜色要求，添加
context.fill();
效果图：
**** Hidden Message *****
很负责任的告诉你，会画直线、矩形、圆没卵用。。。
但是你又不得不会画，万丈高楼平地起，就是这个意思～
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 咱俩快讲到一块去了{:10_249:} 回复看帖！ 交作业！
回复看帖
context.arc(500,400,100,200,Math.PI*2,true);不二我只有改成这个才有显示 {:9_232:} 厉害了 好好看好好学 学习 RE: 0 0 7 6 - Canvas多边形‘实操’ [修改] 123
true 表示逆时针，文中写错了噢。 哈哈哈哈
{:10_277:} 回复看帖 学习 6666666666666
页:
[1]
2