0 0 7 6 - Canvas多边形‘实操’

不二如是 · 发表于 2017-3-13 11:24:56

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 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();

复制代码

效果图：

游客，如果您要查看本帖隐藏内容请回复

很负责任的告诉你，会画直线、矩形、圆没卵用。。。

但是你又不得不会画，万丈高楼平地起，就是这个意思～

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

alltolove · 发表于 2017-3-13 12:46:13

咱俩快讲到一块去了

aswyamato1989 · 发表于 2017-8-23 08:41:35

回复看帖！

aswyamato1989 · 发表于 2017-8-23 22:55:06

交作业！

Lee.C · 发表于 2017-9-1 17:53:24

回复看帖

林子军 · 发表于 2018-2-11 12:28:12

context.arc(500,400,100,200,Math.PI*2,true);不二我只有改成这个才有显示

庚午 · 发表于 2018-2-21 23:10:16

likesunshine · 发表于 2018-5-1 11:26:33

厉害了

a211827754 · 发表于 2018-8-23 17:46:10

好好看好好学

想成大神 · 发表于 2018-12-15 13:43:27

学习

莫希 · 发表于 2019-1-14 19:27:15

RE: 0 0 7 6 - Canvas多边形‘实操’ [修改]

璀璨的天河 · 发表于 2019-5-5 13:09:37

123

suweixuan1998 · 发表于 2020-1-13 11:45:29

true 表示逆时针，文中写错了噢。

笋头蒜头 · 发表于 2020-3-19 09:27:06

哈哈哈哈

287187056 · 发表于 2020-4-2 04:34:50

提示: 作者被禁止或删除内容自动屏蔽

小脑斧 · 发表于 2020-4-7 23:26:21

tianyuan · 发表于 2020-6-3 20:24:51

1041556532 · 发表于 2020-6-15 07:18:55

回复看帖

ainz42 · 发表于 2021-3-31 22:07:17

学习

雪月圣雕 · 发表于 2021-4-9 08:50:09

6666666666666

账号		自动登录	找回密码
密码			立即注册

287187056 287187056 当前离线 UID 104738 日志相册贡献荣誉积分 129 狗仔卡头像被屏蔽	发表于 2020-4-2 04:34:50 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报显身卡

[庖丁解牛] 0 0 7 6 - Canvas多边形‘实操’

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

浏览过的版块