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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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
example2.php
2006/10/09 PHP
PHP提取中文首字母
2008/04/09 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
iView框架问题整理小结
2018/10/16 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
详解python中的线程
2018/02/10 Python
python怎么调用自己的函数
2020/07/01 Python
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
招商专员岗位职责
2014/02/08 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
关于mysql中string和number的转换问题
2022/06/14 MySQL