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伪类选择器:nth-child()
Apr 02 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
PHP4引用文件语句的对比
2006/10/09 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
浅谈javascript语法和定时函数
2015/05/03 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
python使用scrapy解析js示例
2014/01/23 Python
Python程序设计入门(5)类的使用简介
2014/06/16 Python
python实现通过shelve修改对象实例
2014/09/26 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Django框架反向解析操作详解
2019/11/28 Python
python列表返回重复数据的下标
2020/02/10 Python
Python xlwt模块使用代码实例
2020/06/10 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
就业协议书
2014/09/12 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
《鲸》教学反思
2016/02/23 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Golang 遍历二叉树
2022/04/19 Golang
Golang jwt身份认证
2022/04/20 Golang