鱼C论坛

 找回密码
 立即注册
查看: 903|回复: 7

[系列教程] 0 0 7 6 - Canvas多边形‘实操’

[复制链接]
最佳答案
195 
发表于 2017-3-13 11:24:56 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2017-3-13 11:24 编辑

比起让一件事变得很复杂,更重要的是把它变简单


没错,上面那句话,是我为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();
复制代码

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



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

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







这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅

评分

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

查看全部评分

本帖被以下淘专辑推荐:

最佳答案
54 
发表于 2017-3-13 12:46:13 | 显示全部楼层
咱俩快讲到一块去了
最佳答案
0 
发表于 2017-8-23 08:41:35 | 显示全部楼层
回复看帖!
最佳答案
0 
发表于 2017-8-23 22:55:06 | 显示全部楼层
交作业!
076.jpg
最佳答案
0 
发表于 2017-9-1 17:53:24 | 显示全部楼层
回复看帖
最佳答案
0 
发表于 2018-2-11 12:28:12 | 显示全部楼层
  context.arc(500,400,100,200,Math.PI*2,true);不二我只有改成这个才有显示
最佳答案
0 
发表于 2018-2-21 23:10:16 | 显示全部楼层
最佳答案
0 
发表于 2018-5-1 11:26:33 | 显示全部楼层
厉害了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2018-8-15 09:43

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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