QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 464|回复: 5

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

[复制链接]
最佳答案
105 
累计签到:564 天
连续签到:92 天
不二如是 发表于 2017-3-13 11:24:56 4645 | 显示全部楼层 |阅读模式

马上注册加入鱼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帖子,请订阅 专辑传送门)(不喜欢更要订阅

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
23 
累计签到:485 天
连续签到:15 天
alltolove 发表于 2017-3-13 12:46:13 | 显示全部楼层
咱俩快讲到一块去了
最佳答案
0 
累计签到:676 天
连续签到:9 天
aswyamato1989 发表于 2017-8-23 08:41:35 | 显示全部楼层
回复看帖!
最佳答案
0 
累计签到:676 天
连续签到:9 天
aswyamato1989 发表于 2017-8-23 22:55:06 | 显示全部楼层
交作业!
076.jpg
最佳答案
0 
累计签到:22 天
连续签到:2 天
Lee.C 发表于 2017-9-1 17:53:24 | 显示全部楼层
回复看帖
最佳答案
0 
累计签到:6 天
连续签到:1 天
林子军 发表于 7 天前 | 显示全部楼层
  context.arc(500,400,100,200,Math.PI*2,true);不二我只有改成这个才有显示

发表回复

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

本版积分规则

关闭

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

    移动客户端下载(未启用)
    微信公众号

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

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-2-18 15:09

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