html5 Canvas画图教程(9)—canvas中画出矩形和圆形


Posted in HTML / CSS onJanuary 09, 2013

本文讲一下在canvas中画出矩形和圆形的办法,他们属于基础图形。当然,基础图形本来不止他们,但在canvas中,只有画矩形与圆形不需要用其他方法模拟。

canvas画矩形
1,fillRect与strokeRect
fillRect可以直接填充出一个矩形,填充样式是你当前设置的样式;同理strokeRect就是直接描边一个矩形
他们的参数是一致的,依次是(起点x坐标,起点y,矩形的宽,矩形的高)。这里的起点,注意,是指矩形的左上角那个点。
我们通常用他们来做简单的事,他们也只能做简单的事。为什么?因为他们画的图形没有“路径”的说法,直接就出来了。
比如你先用fillRect填充了一个矩形,然后你想把这个矩形描边,如果你使用stroke(),则不会有效果,因为此时虽然有个矩形,但并不存在路径。
如果你迫切的想把这个矩形描边,你可以在同样的位置使用strokeRect()来描边一个矩形——但他们其实是独立的,只是位置重叠罢了。

复制代码
代码如下:

ctx.fillRect(200,100,50,40);
ctx.strokeRect(200,100,50,40);

如果我们想要一个又有填充又有描边的矩形,那同时使用fillRect和strokeRect无疑显得很累赘。所以这种情况我们通常使用以下方法。

2,rect
rect的参数与fillRect和strokeRect毫无差别,不同的是他画出的只是路径,至于描边或是填充要你后续自己完成。

复制代码
代码如下:

ctx.rect(300,100,50,40);
ctx.stroke()
ctx.fill();

这样做有什么好处呢?前面的文章我提到过,填充或描边会消耗大量资源,所以我们经常(比如循环)需要一次性绘制几百条路径,再来描边或填充。此时使用rect画路径,最后再填充,就避免了fillRect和strokeRec每次都要填充或描边的问题。

3,lineTo
当然你也可以像我的画线条的教程那样,用4个lineTo来画出一个矩形。但这毫无必要,具体可查看那篇文章。

Canvas画圆形
苍天无眼,其实canvas并没有一个真正的可以直接画出圆形的函数,他画的其实是一个360度的圆弧,看起来就是个圆形了。
canvas画圆弧的函数我们前面讲过了,即arc.我们用他来画一个圆形:

复制代码
代码如下:

ctx.arc(300+25,100+20,20,0,Math.PI*2);
ctx.stroke()
ctx.fill();

这个arc和rect一样,画出的也是路径,填充或描边需要后续完成。
但要注意的是,圆形的位置判断和矩形是不一样的。我们以矩形的左上角为起点确定他的位置,但圆形的位置我们通常用圆心来确定。
如果你想画一组水平和垂直都居中的矩形与圆形,那你可要记得不要把矩形的起点当成了画圆形的起点——圆形的起点可是圆心哈!
html5 Canvas画图教程(9)—canvas中画出矩形和圆形 
算了,我还是给你一个现在的公式吧,对齐的圆与矩形,圆心的坐标=矩形的坐标+矩形的一半宽高。
也就是圆心x=矩形x+矩形宽/2,圆形y=矩形y+矩形高/2。这样他们就是绝对对齐了的。
虽然arc没有直接画圆的方法那么好用——我设想的直接画圆的方法只需要3个参数,即圆心坐标即半径——但arc不止可以画圆,还可以画半圆什么的,所以功能更强大,用着也将就了。
既然有圆,那么就应该有椭圆,但canvas中连一个正规的画圆的函数都没有,更别提椭圆了。所以画椭圆必须用其他方法模拟,这个比较复杂,我留到后面讲吧。
HTML / CSS 相关文章推荐
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 #HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 #HTML / CSS
You might like
php中的观察者模式
2010/03/24 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
Python基本语法经典教程
2016/03/11 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Python笔记之facade模式
2019/11/20 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
党员干部廉洁承诺书
2014/05/28 职场文书
迎国庆演讲稿
2014/09/15 职场文书
四年级小学生评语
2014/12/26 职场文书
民政工作个人总结
2015/02/28 职场文书
个人催款函范文
2015/06/24 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
python画条形图的具体代码
2022/04/20 Python