鱼C论坛

 找回密码
 立即注册
查看: 3891|回复: 22

[庖丁解牛] 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()描边即可


这次画一个圆形矩形
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6. </head>
  7. <body>
  8.     <canvas id="secondCanvas" width="666" height="666">大兄弟,你的浏览器不支持Canvas</canvas>
  9.     <script type="text/javascript">
  10.         var canvas=document.getElementById("secondCanvas");
  11.         var context=canvas.getContext("2d");
  12.     </script>
  13. </body>
  14. </html>
复制代码


这个就应该算是最基本的Canvas使用结构了。

开始绘制矩形,就要用到strokeRect()方法
  1.     context.lineWidth=6;

  2.         context.strokeStyle="#7F0";
  3.         context.strokeRect(150,250,199,299);

  4.         context.stroke();
复制代码

背景图:
Snip20170313_772.png


context.stroke(150,150,199,299)的意思是:

从(150,150)点开始,开始绘制一个宽为199,高为299的矩形。

还可以进行填充色.
  1. context.fillStyle="#FFB7DD";
  2.         context.fillRect(150,250,199,299);
复制代码

效果图:
Snip20170313_774.png


再来绘制一个圆形吧,方法和65一样调用“Math.PI*2”
  1.   context.beginPath();
  2.         context.arc(500,300,100,0,Math.PI*2,false);
  3.         context.closePath();
  4.         context.stroke();
复制代码

效果图:
Snip20170313_775.png


★第一、二个参数,(500,300)代表圆心坐标

★第三个参数是圆的半径。

★第四个参数代表圆周起始位置。

0对应PI就是起始位置

沿顺时针路线,分别是0.5 PI(正下方),1 PI和1.5 PI(正上方),为画饼图提供了扇形范围的依据。

★第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆。

★第六个参数是一个布尔值,true是顺时针false是顺时针.

因为在上面已经填色了,如果没有新的颜色要求,添加
  1. context.fill();
复制代码

效果图:
游客,如果您要查看本帖隐藏内容请回复



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

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

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


官方 Web 课程:

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 无条件支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-13 12:46:13 | 显示全部楼层
咱俩快讲到一块去了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-23 08:41:35 | 显示全部楼层
回复看帖!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-23 22:55:06 | 显示全部楼层
交作业!
076.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-9-1 17:53:24 | 显示全部楼层
回复看帖
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-2-11 12:28:12 | 显示全部楼层
  context.arc(500,400,100,200,Math.PI*2,true);不二我只有改成这个才有显示
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-2-21 23:10:16 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-5-1 11:26:33 | 显示全部楼层
厉害了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-23 17:46:10 | 显示全部楼层
好好看好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-12-15 13:43:27 | 显示全部楼层
学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-1-14 19:27:15 | 显示全部楼层
RE: 0 0 7 6 - Canvas多边形‘实操’ [修改]
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-5-5 13:09:37 | 显示全部楼层
123
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-1-13 11:45:29 | 显示全部楼层
true 表示逆时针,文中写错了噢。
1578887078(1).jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-19 09:27:06 | 显示全部楼层
哈哈哈哈
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

头像被屏蔽
发表于 2020-4-2 04:34:50 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-4-7 23:26:21 | 显示全部楼层

撸鉄.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-3 20:24:51 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-15 07:18:55 | 显示全部楼层
回复看帖
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-3-31 22:07:17 | 显示全部楼层
学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-4-9 08:50:09 | 显示全部楼层
6666666666666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 16:39

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表